使用Jest和React JS TestUtils测试表单

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个带有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找到这个例子。

回答：

问题是您已经将原始功能交给了React之后就替换了该功能。表达式onSubmit={this.done}就是那个函数，它被设置为事件处理程序。渲染功能完成后，您进行了替换，instance.done但React已经有了旧功能。您应该做的是：

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

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

以上是 使用Jest和React JS TestUtils测试表单 的全部内容， 来源链接： utcz.com/qa/405403.html

回到顶部