在为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结构进行断言.只需下载开发插件build(react-with-addons.js)并将其拉出来:

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

如果有什么不清楚,请告诉我.