使用 reactJs TestUtils 模拟文本输入答案

【问题标题】：Simulating text entry with reactJs TestUtils使用 reactJs TestUtils 模拟文本输入
【发布时间】：2014-09-03 23:38:25
【问题描述】：

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

我有一个在 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) 周围找到的文档内联，第一个对我来说很有意义（设置实际的文本框值然后伪造一个事件）

【问题讨论】：

标签： javascript unit-testing reactjs reactjs-testutils

【解决方案1】：

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

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

【讨论】：

是否有更全面的 Simulate 文档？我只能找到几个例子，我想了解更多关于“规格”的信息。为什么是“目标”，为什么是“价值”？还有哪些其他选择？
我只知道这个页面：facebook.github.io/react/docs/test-utils.html。除此之外，我很确定它只是遵循在浏览器中触发事件时更改的本机值。
我在哪里可以找到这些原生值的文档？
事件的 MDN 参考页面可能是一个很好的地方，因为每个事件的页面都涵盖了值更改的一些细节：developer.mozilla.org/en-US/docs/Web/Events。除此之外，您还可以查看 W3 规范：w3.org/TR/DOM-Level-2-Events/events.html。

【解决方案2】：

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

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

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

【讨论】：