javascript - 在 jest/enzyme 中，如何模拟点击一个元素，其中 eventListener 由 [element].addEventListener(不是 window.addEventListener)绑定(bind)？

Question

在 React 中，当你有一个带有 onClick 属性的元素时，很容易使用 Enzyme 的 .simulate("click") 方法来点击它。然而，在我的代码库中有一个示例，其中一个元素被 React 的“ref”prop 引用，然后该元素的 .addEventListener 被调用以将事件处理程序绑定(bind)到它。

我提供了一个代码示例:https://codesandbox.io/s/1z4xok048j

关键行是这样的:

if (this.refs.hey) {
  this.refs.hey.addEventListener("click", this.handleClick);
}

在代码示例中，事件处理程序在 componentDidUpdate 运行之前未绑定(bind)，因此如果您单击“单击我以增加计数器”div，子元素将接收新 Prop 及其 componentDidUpdate 触发器。然后，如果您单击 Child 元素，它的 eventHandler 将按预期触发。但是，我无法在我的 Enzyme/Jest 测试中重现此行为。

我已经完成了 Enzyme 中明显的 .simulate("click") 方法，但它不起作用；当我从使用 refs 和事件监听器更改为使用 onClick 时，.simulate("click") 按预期工作。但是，删除 refs 会导致其他错误浮出水面，我一直无法弄清楚原因，所以我更愿意找到一种方法来模拟单击按钮。

Answer 1

.simulate("click") 的代码实际上是在寻找 onClick 函数并将参数传递给它，没有发生“实际”点击。您可能必须使用类似的东西模拟 addEventListener 函数

// Set-up event listener mock
const map = {};
window.addEventListener = jest.genMockFn().mockImpl((event, callback) => {
  map[event] = callback;
});