使用 Jest 和 React JS TestUtils 测试表单
2014-10-20
5849
我有一个带有 3 个单选按钮的表单,如下所示(假名):
<form className="myForm" onSubmit={this.done}>
<input className="myRadio" checked={ŧrue} type="radio" name="myRadio" onChange={this.change} value="value1"
<input className="myRadio" type="radio" name="myRadio" onChange={this.change} value="value2"
<input className="myRadio" type="radio" name="myRadio" onChange={this.change} value="value3"
<input type="submit" className="submit" />
</form>
而且我在尝试测试 onChange 和 onSubmit 事件时遇到了很大困难。
inputs = TestUtils.scryRenderedDOMComponentsWithClass(MyComponentRendered, 'myRadio');
myForm = TestUtils.findRenderedDOMComponentWithClass(MyComponentRendered, 'myForm');
我有一个类似这样的测试:
it("changes the checked state when clicked", function() {
MyComponent.change = jest.genMockFunction();
expect(inputs[0].getDOMNode().checked).toBe(true);
TestUtils.Simulate.change(inputs[1], {target: {value: 'value2'}});
expect(inputs[0].getDOMNode().checked).toBe(false);
expect(inputs[1].getDOMNode().checked).toBe(true);
expect(inputs[2].getDOMNode().checked).toBe(false);
expect(MyComponent.change).toBeCalled(); //Fails
expect(MyComponent.change.mock.calls.length).toBe(1); //Fails too
});
除了应该调用但没有调用的函数(MyComponent.change)之外,它都有效。
我还有一个 onSubmit 测试:
it("saves on submit", function()
MyComponent.done = jest.genMockFunction();
MyComponent.insideDone = jest.genMockFunction();
TestUtils.Simulate.submit(myForm);
expect(MyComponent.done).toBeCalled(); //Fails
expect(MyComponent.insideDone).toBeCalled(); //Success
});
注意:MyComponent.insideDone 是由“done”函数调用的函数。
这也失败了。我很确定这里的问题是我没有以正确的方式模拟事件。但是,我没有找到使用 Jest 和 React 中的 TestUtils 的示例。
1个回答
问题在于,您已经给出了原始功能进行反应后替换功能。 Expression
OnSubmit = {this.done}
是该功能,并将其设置为事件处理程序。渲染函数完成后,您替换
instance.done
,但React已经获得了旧功能。您应该做的是:
&lt; form className =“ myform” onsubmit = {()=&gt; this.done()}&gt;
这确保事件处理程序始终在实例上调用方法(您替换的方法)。这具有与React兼容的未来副作用,因为它们将停止自动插入实例的所有方法。
Anders Ekdahl
2015-04-16