14

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

如何在服务器端 nodejs 环境中执行此操作，例如 mocha？以及如何在浏览器环境中使用像业力这样的跑步者来做到这一点？

4

2 回答 2

20

我发现将事件处理程序与状态更改逻辑分离通常更好，这是我真正想要测试的东西。

例如，我有一个组件需要对“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% 可单元测试的，因为它是“纯粹的”——没有副作用。它接受一个状态，并返回新的状态。

也许这并没有直接“回答问题”，但我试图提供帮助 =)将您的状态更改逻辑与事件处理程序解耦将使您的代码更具可测试性和可维护性。

这并不是说您永远不需要模拟事件——它在许多情况下都很有用，包括在烟雾测试中以确保一切都正确连接。但是我刚刚发现，大多数时候我想模拟浏览器事件是因为我的代码耦合度太高了。

于 2013-12-07T21:13:49.663 回答
12

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

还有一些其他有用的实用程序可用于对 DOM 结构进行断言。只需下载开发插件 build ( react-with-addons.js) 并将其拉出，如下所示：

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

如果这里有任何不清楚的地方，请告诉我。

于 2013-12-06T01:41:31.527 回答