使用 Jest 和 React JS TestUtils 测试表单

IT技术 javascript reactjs jestjs reactjs-testutils
2021-05-01 18:17:21

我有一个包含 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 的示例。

1个回答

问题是您在将原始函数提供给 React 之后正在替换该函数。表达式onSubmit={this.done}就是那个函数,它被设置为事件处理程序。渲染函数完成后,您替换instance.done但 React 已经获得了旧函数。你应该做的是:

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

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