В шутке / энзиме, как вы моделируете щелчок по элементу с eventListener, связанным с [element] .addEventListener (не window.addEventListener)?

Question

В реакции, когда у вас есть элемент с пропеллером onClick, легко использовать метод Enzyme .simulate("click"), чтобы щелкнуть по нему.Тем не менее, в моей кодовой базе есть пример, когда на элемент ссылается опора «ref» React, а затем вызывается .addEventListener этого элемента для привязки к нему обработчика события.

Я предоставил пример кода: https://codesandbox.io/s/1z4xok048j

Ключевая строка такова:

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

В примере кода eventHandler не привязан, пока не будет запущен componentDidUpdate, поэтому, если вы нажмете на «нажмите меня, чтобысчетчик приращения "div, дочерний элемент получает новые реквизиты и его триггеры componentDidUpdate.Затем, если вы щелкнете по элементу Child, его EventHandler сработает, как и ожидалось.Однако я не могу воспроизвести это поведение в моих тестах Enzyme / Jest.

Я сделал очевидный метод .simulate("click") от Enzyme, и он не работает;когда я переключаюсь с использования refs и слушателей событий на onClick, .simulate("click") работает как положено.Однако удаление ссылок приводит к появлению других ошибок, и я не смог понять, почему, поэтому я предпочел бы найти способ имитировать нажатие кнопки.

Answer 1

Ответ на самом деле очень прост.Общая идея заключается в .find узле и получении базового HTML-узла DOM с .getDOMNode().Получив его, замените его .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, и вы можете вызывать их в тестах.

Answer 2

Код для .simulate("click") фактически ищет функцию onClick и передает ей параметры, при этом «фактический» щелчок не происходит.Возможно, вам придется смоделировать функции addEventListener с чем-то вроде

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