我正在用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>
)
}
}
这是测试:
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
是否被调用。我怎样才能做到这一点?
您可以直接通过原型直接监视该方法。
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);
})
另外,您可以在实例的方法上使用间谍,但是您必须进行强制更新,因为在调用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);
})
问题内容: 我正在使用Jest和Enzyme来测试React复选框组件。 这是我的测试: 但是在运行测试时出现此错误: 这是我的组件的输入: 我 想 那我需要通过一个事件作为第二个对象,但我不知道如何做到这一点。 谢谢 问题答案: 函数采用其他参数,这些参数将传递给事件处理程序。您可以嘲笑事件。例如:
问题内容: 如何监听基于控件的更改事件? http://jsfiddle.net/NV/kb3gN/1621/ 问题答案: 编辑: 请参阅SebastienLorber的答案,该答案修复了我的实现中的错误。 编辑06/2016:我刚刚遇到了一个新问题,当浏览器尝试“重新格式化”刚刚给他的html时,会导致组件始终重新呈现,这会出现一个新问题。看到 编辑07/2016:这是我的生产实现。它有一些您可
事件,就是网页中某个特别值得关注的瞬间。事件经常由用户操作或通过其他浏览器功能来触发。 但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样。也就是说,这些事件该冒泡还会冒泡,而且照样能够导致浏览器执行已经指定的处理它们的事件处理程序。在测试Web 应用程序,模拟触发事件是一种极其有用的技术。DOM2 级规范为此规定了模拟特定事件的方式
模拟事件 浏览器事件的相关信息有:Event对象、事件类型、事件处理程序。那么模拟出的事件也应该有这些信息。 DOM中的事件模拟 模拟事件的步骤: 第一步:通过document.createEvent()方法创建event对象。 可以在document对象上使用 createEvent()方法创建 event事件对象。该方法接收一个参数,表示事件类型的字符串。DOM2中字符串是以复数表示的,在DO
问题内容: 我有一个React组件(为了演示该问题,对此进行了简化): 现在,我要测试提供的值的调用。 为此,我想创建一个代替组件方法的笑话模拟函数。 到目前为止,这是我的测试用例: 但是我在控制台中得到的只是: 语法错误 所以我的问题是,如何正确地用酶模拟组分方法? 问题答案: 可以通过以下方式模拟该方法: 您还需要在被测组件的包装器上调用.update,以便正确注册模拟功能。 语法错误来自错误
问题内容: 我正在使用事件委托来侦听DOM中较低级的事件,但不适用于选择框上的onchange事件。onchange事件会传播还是冒充DOM? 谷歌搜索未能找到结论性的答案。 问题答案: 根据规范,,,应该气泡和和不应该泡沫。 此行为是正确实现在所有web浏览器除了IE <9,即,,,做适当气泡在IE> = 9。