在开玩笑/酶中，如何模拟使用[element] .addeventListener绑定的EventListener的单击

Question

在React中，当您具有带有onclick Prop的元素时，很容易使用酶的.simulate("click")方法单击它。但是，在我的代码库中有一个示例，其中react的" ref" prop引用了一个元素，然后调用该元素的 .addEventListener将事件处理程序绑定到它。

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

关键行是：

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

在代码示例中，在运行componentDidupdate之前，事件Handler不会绑定，因此，如果您单击"单击我以增加我的计数器"div，则儿童元素将接收新的道具及其componentDidupdate触发器。然后，如果您单击子元素，则其eventhandler触发预期。但是，我无法在酶/嘲笑测试中重现这种行为。

我从酶做了明显的.simulate("click")方法，它不起作用。当我从使用REFS和事件侦听器更改为使用onClick时，.simulate("click")按预期工作。但是，删除REFS会导致其他错误浮出水面，我无法弄清楚原因，因此我更喜欢找到一种模拟单击按钮的方法。

Answer 1

.simulate("click")的代码实际上查找了onClick函数并将参数传递给它，没有"实际"单击。您可能必须使用

之类的aDdEventListener函数模拟AddEventListener函数

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

Answer 2

答案实际上真的很简单。一般的想法是.find节点，并使用.getDOMNode()获取基础HTML DOM节点。一旦拥有它，请像这样更换其.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中找到，您可以在测试中调用它们。