효소가 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); 
}) 

내가 기대하고있는 <input> 상자에 사용자 유형의 텍스트가 handleChange 방법이 될 것입니다 때 라는. 위의 테스트는 다음과 같이 실패합니다.

AssertionError: expected false to equal true 
+ expected - actual 

-false 
+true 

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

무엇이 잘못 되었나요?

내가 명확히해야

편집, 내 목표는 방법 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); 
})