在jest / enzyme中，如何使用[element] .addEventListener（而不是window.addEventListener）綁定的eventListener模擬元素上的單擊？

Question

在反應中，當你有一個帶有onClick道具的元素時，很容易使用Enzyme的.simulate("click")方法來點擊它。 但是，在我的代碼庫中有一個例子，其中一個元素被React的“ref”prop引用，然后調用該元素的.addEventListener來將事件處理程序綁定到它。

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

關鍵是這樣的：

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

在代碼示例中，在運行componentDidUpdate之前不綁定eventHandler，因此如果單擊“click me to increment counter”div，子元素將接收新的props及其componentDidUpdate觸發器。 然后，如果單擊Child元素，其eventHandler將按預期觸發。 但是，我無法在我的Enzyme / Jest測試中重現這種行為。

我已經完成了.simulate("click")中明顯的.simulate("click")方法，但它不起作用; 當我從使用refs和事件監聽器更改為使用onClick ， .simulate("click")按預期工作。 但是，刪除引用會導致其他錯誤浮出水面，我無法找出原因，所以我更願意找到一種模擬單擊按鈕的方法。

Answer 1

.simulate("click")的代碼實際上是查找onClick函數並將params傳遞給它，沒有“實際”點擊進行。 您可能必須使用類似的東西來模擬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找到，您可以在測試中調用它們。