Redux / Mocha中的單元測試事件

Question

我正在研究一個由一個字段和一個Submit按鈕組成的React組件。

我有一個名為“ onMapPointAdded”的事件，當用戶輸入文本並單擊“提交”按鈕時將觸發該事件。

我該如何測試？ 提前致謝！

我正在使用以下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)

這些是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', () => {

    })
  })
})

Answer 1

我使用表單提交事件，而不是輸入事件

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

測試庫可以在執行點攔截被調用的函數，因此我們可以在單擊提交按鈕后檢查onMapPointAdded的返回值