酵素はonChangeイベントをシミュレートします

Question

私は反応成分をモカと酵素で試験しています。ここでは（当然の簡略化のために短縮）コンポーネントは次のとおりです。

class New extends React.Component { 

    // shortened for simplicity 

    handleChange(event) { 
    // handle changing state of input 

    const target = event.target; 
    const value = target.value; 
    const name = target.name 
    this.setState({[name]: value}) 

    } 


    render() { 
    return(
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <div className="form-group row"> 
      <label className="col-2 col-form-label form-text">Poll Name</label> 
      <div className="col-10"> 
       <input 
       className="form-control" 
       ref="pollName" 
       name="pollName" 
       type="text" 
       value={this.state.pollName} 
       onChange={this.handleChange} 
       /> 
      </div> 
      </div> 

      <input className="btn btn-info" type="submit" value="Submit" /> 
     </form> 
     </div> 
    ) 
    } 
} 

そして、ここではテストです：

it("responds to name change", done => { 
    const handleChangeSpy = sinon.spy(); 
    const event = {target: {name: "pollName", value: "spam"}}; 
    const wrap = mount(
    <New handleChange={handleChangeSpy} /> 
); 

    wrap.ref('pollName').simulate('change', event); 
    expect(handleChangeSpy.calledOnce).to.equal(true); 
}) 

私はhandleChange方法がされるときに、ユーザーの種類のテキスト<input>ボックスにすることを期待していますと呼ばれる。上記のテストで失敗します：

AssertionError: expected false to equal true 
+ expected - actual 

-false 
+true 

at Context.<anonymous> (test/components/new_component_test.js:71:45) 

私は間違っていますか？

EDIT

私は私の目的はメソッドhandleChangeが呼び出されることをテストすることで、明確にすべき。どうやってやるの？

Answer 1

プロトタイプを介してメソッドに直接スパイすることができます。

it("responds to name change", done => { 
    const handleChangeSpy = sinon.spy(New.prototype, "handleChange"); 
    const event = {target: {name: "pollName", value: "spam"}}; 
    const wrap = mount(
    <New /> 
); 
    wrap.ref('pollName').simulate('change', event); 
    expect(handleChangeSpy.calledOnce).to.equal(true); 
}) 

代わりに、インスタンスのメソッドにスパイを使用することができますが、あなたはすでにマウント後にレンダリングされるコンポーネントがすでに元のにバインドされているのonChangeを意味し、呼ばれているので、強制的に更新を行う必要があります。

it("responds to name change", done => { 
    const event = {target: {name: "pollName", value: "spam"}}; 
    const wrap = mount(
    <New /> 
); 
    const handleChangeSpy = sinon.spy(wrap.instance(), "handleChange"); 
    wrap.update(); // Force re-render 
    wrap.ref('pollName').simulate('change', event); 
    expect(handleChangeSpy.calledOnce).to.equal(true); 
})