在 jest/enzyme 中，你如何模拟一个元素的点击，其中 eventListener 绑定了 [element].addEventListener（不是 window.addEventListener）？答案

【问题标题】：In jest/enzyme, how do you simulate a click on an element with eventListener bound by [element].addEventListener (not window.addEventListener)?在 jest/enzyme 中，你如何模拟一个元素的点击，其中 eventListener 绑定了 [element].addEventListener（不是 window.addEventListener）？
【发布时间】：2019-02-14 02:05:54
【问题描述】：

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

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

关键是这样的：

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

在代码示例中，直到 componentDidUpdate 运行后 eventHandler 才被绑定，因此如果单击“单击我以增加计数器”div，子元素将接收新的 props 并触发其 componentDidUpdate。然后，如果您单击 Child 元素，它的 eventHandler 会按预期触发。但是，我无法在 Enzyme/Jest 测试中重现此行为。

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

【问题讨论】：

标签： javascript reactjs event-handling jestjs enzyme

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

答案其实很简单。大致思路是.find这个节点，用.getDOMNode()得到底层的HTML DOM Node。一旦你有了它，像这样替换它的.addEventListener：

const map ={};
const namedByRefComponent = component.find(".some-class-name");
const namedByRefDomNode = namedByRefComponent.getDOMNode();

namedByRefDomNode.addEventListener = jest.fn().mockImplementation((event, cb) => {
    map[event] = cb;
});

之后，您的 DOM 节点的事件处理程序可以在 map 中找到，您可以在测试中调用它们。

【讨论】：