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

私は、フォームに入力されたイベントにイベントを提出するのではなくを使用し

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後にボタンが