使用 Jest 和 React JS TestUtils 测试表单 [英] Test a form with Jest and React JS TestUtils

问题描述

我有一个包含 3 个单选按钮的表单，如下所示(假名):

I have a form with 3 radio buttons like follows (fake names):

<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 事件.

And I am having very hard time trying to test the onChange and the onSubmit events.

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) 之外，它有效，但它不是.

That works except for the function (MyComponent.change) that should be called but it is not.

我也有一个 onSubmit 测试:

I also have one test for 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' 函数调用的函数.

Notice: MyComponent.insideDone is a function that is called by 'done' function.

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

Which fails too. I am pretty sure that the problem here is that I am not simulating the events in a correct way. However, I didn't find example of this using Jest and TestUtils from React.

推荐答案

问题是你已经把原来的函数交给了 React 之后，你又在替换这个函数.表达式 onSubmit={this.done} 就是那个函数，它被设置为事件处理程序.渲染函数完成后，你替换 instance.done 但 React 已经得到了旧函数.你应该做的是:

The problem is that you are replacing the function after you have already given the original function to React. The expression onSubmit={this.done} is that function, and that is set as the event handler. After the render function finishes, you replace instance.done but React already got the old function. What you should do is instead:

this.done()}>

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

This makes sure that the event handler always invokes the method on the instance (the one you replaced). This has the nice side effect of being future compatible with React, since they will stop autobinding all methods to the instance.

这篇关于使用 Jest 和 React JS TestUtils 测试表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！