使用Jest和React JS TestUtils测试表单

Question

我有一个带有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'函数调用的函数.

哪个也失败了.我很确定这里的问题是我没有以正确的方式模拟事件.但是,我没有找到使用React的Jest和TestUtils的例子.

Answer 1

问题是，在将原始函数提供给 React 之后，您要替换该函数。表达式onSubmit={this.done}就是该函数，并且被设置为事件处理程序。渲染函数完成后，您进行替换，instance.done但 React 已经获得了旧函数。相反，你应该做的是：

<form className="myForm" onSubmit={() => this.done()}>

这可确保事件处理程序始终调用实例（您替换的实例）上的方法。这具有未来与 React 兼容的良好副作用，因为它们将停止将所有方法自动绑定到实例。