使用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是一个由完成"函数调用的函数.

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:

<form className="myForm" onSubmit={() => 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屋！