Javascript Enzyme 模拟一个 onChange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43426885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enzyme simulate an onChange event
提问by stoebelj
I'm testing a react component with Mocha and Enzyme. Here is the component (shortened for simplicity of course):
我正在用 Mocha 和 Enzyme 测试反应组件。这是组件（当然为了简单起见缩短了）：
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>
)
}
}
And here is the test:
这是测试：
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);
})
I am expecting that when the user types text into the <input>box the handleChangemethod will be called. The test above fails with:
我期望当用户在<input>框中键入文本时，handleChange将调用该方法。上面的测试失败了：
AssertionError: expected false to equal true
+ expected - actual
-false
+true
at Context.<anonymous> (test/components/new_component_test.js:71:45)
What am I doing wrong?
我究竟做错了什么？
EDIT
编辑
I should clarify, my objective is to test that the method handleChangeis called. How can I do that?
我应该澄清一下，我的目标是测试该方法handleChange是否被调用。我怎样才能做到这一点？
回答by Evan Sebastian
You can simply spy to the method directly via the prototype.
您可以简单地通过原型直接监视该方法。
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);
})
Alternatively, you can use spy on the instance's method, but you have to make a forced update because the component is already rendered after mount is called, which means the onChange is already bound to its original.
或者，您可以对实例的方法使用 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);
})
