효소 시뮬레이션 onChange 이벤트

Question

원본 비 AMP 버전 편집

효소 시뮬레이션 onChange 이벤트

나는'm 테스트에 반응하는 구성 요소 Mocha 및 효소입니다. 여기에는 구성요소(단축의 단순화를 위해 코스):

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라고 합니다. 렇게 하려면 어떻게 해야 합니까?

stoebelj

편집된 질문16일 4월 2017 в 10:25

프로그래밍

javascript mocha reactjs enzyme

15일 4월 2017 в 1:53

아직 보기가 없습니다.

질문에 대한 의견 (1)

Evan Sebastian · Accepted Answer · 2017-06-01T03:09:59+00:00

당신은 단순히 스파이의 방법을 통해 직접 프로토 타입입니다.

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

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

사용할 수 있습니다,또는 스파이에서 인스턴스's 방법,하지만 당신은 강요했기 때문에 업데이트 구성 요소를 렌더링 이미 후에 산다라는 것을 의미하는 onChange 이미 행하여 그것의 원래 있습니다.

it("responds to name change", done => {
  const event = {target: {name: "pollName", value: "spam"}};
  const wrap = mount(

  );
  const handleChangeSpy = sinon.spy(wrap.instance(), "handleChange");
  wrap.update(); // Force re-render
  wrap.ref('pollName').simulate('change', event);
  expect(handleChangeSpy.calledOnce).to.equal(true);
})