[英]Unit Testing Events in Redux/Mocha
I am working on a React component comprised of a field and a Submit button. 我正在研究一个由一个字段和一个Submit按钮组成的React组件。
I have an event called 'onMapPointAdded' , which is fired when users input text and click the Submit button. 我有一个名为“ onMapPointAdded”的事件,当用户输入文本并单击“提交”按钮时将触发该事件。
How can I test it? 我该如何测试? Thanks in advance!
提前致谢!
I am working with the following React component: 我正在使用以下React组件:
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { addMapPoint } from '../actions'
export class AddMapPoint extends Component {
constructor(props) {
super(props)
this._handleOnSubmit = this._handleOnSubmit.bind(this)
}
_handleOnSubmit(e) {
console.log(e)
e.preventDefault()
let value = this.input.value.trim()
if (value) {
this.props.onMapPointAdded(this.input.value, this.props.center.lat, this.props.center.lng)
}
}
render() {
return (
<div>
<form onSubmit={this._handleOnSubmit}>
<input ref={node => {this.input = node}}/>
<button type='Submit'>Add Map Point</button>
</form>
</div>
);
}
}
AddMapPoint.propTypes = {
center: PropTypes.shape({
lat: PropTypes.number.isRequired,
lng: PropTypes.number.isRequired
}).isRequired,
onMapPointAdded: PropTypes.func.isRequired
}
const mapStateToProps = (state) => {
return {
center: state.center
}
}
const mapDispatchToProps = (dispatch) => {
return {
onMapPointAdded: (value, lat, lng) => {
dispatch(addMapPoint(value, lat, lng))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddMapPoint)
These are the unit tests for the React component: 这些是React组件的单元测试:
import expect from 'expect'
import React from 'react'
import TestUtils from 'react-addons-test-utils'
import { AddMapPoint } from '../../src/components/AddMapPoint'
function setup() {
let props = {
onMapPointAdded: expect.createSpy(),
center: { lat: 59.938043, lng: 30.337157 }
}
let renderer = TestUtils.createRenderer()
renderer.render(<AddMapPoint {...props} />)
let output = renderer.getRenderOutput()
return {
props,
output,
renderer
}
}
describe('components', () => {
describe('AddMapPoint', () => {
it('should render correctly', () => {
const { output } = setup()
expect(output.type).toBe('div')
let form = output.props.children
expect(form.type).toBe('form')
let [input, button] = form.props.children
expect(input.type).toBe('input')
expect(button.type).toBe('button')
expect(button.props.children).toBe('Add Map Point')
expect(button.props.type).toBe('Submit')
})
it('should call onMapPointAdded if length of text is greater than 0', () => {
})
})
})
i use the on form submit event rather than on input event 我使用表单提交事件,而不是输入事件
import expect from 'expect'
import React from 'react'
import TestUtils from 'react-addons-test-utils'
import { AddMapPoint } from '../../src/components/AddMapPoint'
describe('components', () => {
describe('AddMapPoint', () => {
it('should call onMapPointAdded if user enters text and clicks submit 0', () => {
const {output2} = setup();
let form = output2.props.childern;
let [input, button] = form.props.children;
input.value = "some text";
TestUtils.Simulate.click(button);
expect(output2.props.onMapPointAdded.calledOnce).to.equal(true);
});
});
});
testing libraries can intercept called function at execution point hence we can check the return value of onMapPointAdded after submit button is clicked 测试库可以在执行点拦截被调用的函数,因此我们可以在单击提交按钮后检查onMapPointAdded的返回值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.