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兼容的良好副作用，因为它们将停止自动将所有方法自动绑定到实例。

使用Jest和React JS TestUtils测试表单

1 个答案: