使用 reactJs TestUtils 模拟文本输入

IT技术 javascript unit-testing reactjs reactjs-testutils
2021-04-29 03:49:43

我希望能够模拟用户使用 reactjs 在文本框中键入内容，以便我可以测试我的验证状态消息。

我有一个在 keyUp 上验证的react组件

下面是我尝试过的简单示例。

nameInput.props.value = 'a';
React.addons.TestUtils.Simulate.keyUp(nameInput);
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');

当我在验证器中调试时，这似乎不会改变绑定文本框的值

React.addons.TestUtils.Simulate.keyUp(nameInput, {key: 'a'});
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');

这也不行。

有人可以指出我在正确的轨道上，第二个与我可以在模拟（http://facebook.github.io/react/docs/test-utils.html）周围找到的文档内联，第一个对我有意义（设置实际的文本框值然后伪造一个事件）

2个回答

通过设置，nameInput.props.value = 'a';您实际上并未更新组件中的值。

您应该使用React.addons.TestUtils.Simulate.change(nameInput, { target: { value: 'a' } });或类似的东西来模拟修改实际值。

我发现这种语法更适合我：

  const emailInput = component.refs.userEmailInput;
  emailInput.value = 'test@gmail.com';
  Simulate.change(component.refs.userEmailInput);

第二行用文本“test@gmail.com”更新输入。最后一行触发更改。

其它你可能感兴趣的问题
上一篇使用 Octoprint REST API 上传文件 下一篇为什么我的 React 组件没有随着状态更新而更新？