12

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

4

1 回答 1

2

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

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

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

于 2015-04-16T11:30:54.757 回答