在为React js编写测试时如何模拟浏览器事件？

Question

如何模拟div元素的点击？还是鼠标移动？还是文字输入？

如何在服务器端nodejs环境中执行此操作，例如mocha？ 我如何在浏览器环境中使用像karma这样的跑步者来做呢？

Answer 1

我发现通常最好将事件处理程序与状态更改逻辑分离，这是我实际想要测试的内容。

例如，我有一个组件需要对“tab”按键

做出反应

// this is hooked up in my render function
onKeyPress: function (e) {
  if (e === 9) {
    e.preventDefault()
    this.onTab(e.shiftKey)
    return
  }
  ..
},
onTab: function (shift) {
  var newstate = states.tab(shift, this.state)
  if (newstate) this.setState(newstate)
}

然后在states.js文件中我有逻辑处理我应该如何根据当前状态和用户按Tab键的事实更改状态。 此states.tab方法是100％unittestable，因为它是“纯粹的” - 没有副作用。它接受一个状态，并返回新状态。

也许这并没有直接“回答问题”，但我正在尝试提供帮助=）将状态改变逻辑与事件处理程序分离将使您的代码更多可测试和可维护的。

这并不是说您永远不需要模拟事件 - 它可以用于许多情况，包括在冒烟测试中确保所有内容都正确连线。 但我刚刚发现大部分时间我都想模拟浏览器事件，因为我的代码太过耦合了。

Answer 2

从版本React 0.9开始，我们已经包含了ReactTestUtils这是一小组工具，可以帮助您测试组件。最有用的部分是事件模拟 - 您可以运行ReactTestUtils.Simulate.click(node)以使用React的合成事件系统模拟点击事件。

还有一些其他有用的实用程序用于对DOM结构进行断言。只需下载开发插件版本（react-with-addons.js）并将其拉出来：

var ReactTestUtils = React.addons.TestUtils;
ReactTestUtils.Simulate.click(node);

如果有什么不清楚的话，请告诉我。