使用ReactJs TestUtils 模拟文本输入

Question

我想要能够使用reactjs模拟用户在文本框中输入文字，以便测试验证状态消息。

我有一个React组件，在keyUp时会进行验证。

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

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）相符，第一个对我有意义（设置实际文本框值，然后模拟一个事件）。

- undefined

Answer 1

通过设置nameInput.props.value = 'a';并不能真正更新组件中的值。

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

- jonowzz

---

有关Simulate的更全面文档在哪里可以找到？ 我只找到了一些例子，我想了解更多有关“规格”的信息。 为什么要使用“目标”，为什么要使用“值”？还有哪些其他选项可用？ - diogovk

我只知道这个页面：http://facebook.github.io/react/docs/test-utils.html。除此之外，我相信它只是遵循在浏览器中触发事件时更改的本机值。 - jonowzz

我在哪里可以找到这些本地值的文档？ - diogovk

MDN 的事件参考页面可能是一个不错的查找位置，因为每个事件页面都涵盖了一些值变化的细节：https://developer.mozilla.org/en-US/docs/Web/Events。此外，您还可以查看 W3 规范：http://www.w3.org/TR/DOM-Level-2-Events/events.html。 - jonowzz

Answer 2

我发现这种语法对我来说更好：

  const emailInput = component.refs.userEmailInput;
  emailInput.value = '[e-mail]';
  Simulate.change(component.refs.userEmailInput);

第二行更新了输入框中的文本为“[e-mail]”。最后一行触发了更改。

- Matt Goo