Redux/Mocha中的单元测试事件

Question

我正在处理由字段和提交按钮组成的React组件。

我有一个称为'onMappointAdded'的事件，当用户输入文本并单击"提交"按钮时，该事件会被触发。

我该如何测试？提前致谢！

我正在使用以下反应组件：

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)

这些是反应组件的单位测试：

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', () => {
    })
  })
})

Answer 1

我使用on表单提交事件而不是输入事件

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);
    });
  });
});

测试库可以在执行点截止名为函数，因此我们可以在单击提交按钮后检查onMappointAdd的返回值