Enzyme 模拟一个 onChange 事件

IT技术 javascript reactjs mocha.js enzyme

2021-03-24 07:00:18

我正在用 Mocha 和 Enzyme 测试react组件。这是组件（当然为了简单起见缩短了）：

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是否被调用。我怎样才能做到这一点？

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

或者，您可以对实例的方法使用 spy，但您必须进行强制更新，因为在调用 mount 后组件已经呈现，这意味着 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);
})

@AKJdone是 mocha 框架的一部分。要异步运行测试，请done()在测试完成时调用。

2021-06-05 07:00:18

嗯奇怪。尝试第二种方法时出现以下错误。TypeError: wrap.ref(...).simulate 不是函数

2021-06-10 07:00:18

嗨，我是 Enzyme 的新手并在 ReactJS 上进行测试，在这一行中“完成”的目的是什么： done => {...}？谢谢

2021-06-13 07:00:18

其它你可能感兴趣的问题

上一篇在 create-react-app 上运行构建后的空白页面下一篇在 Gatsby React 页面中添加带有 <script> 的原始 HTML