Блог

Главная - Вопросы по программированию - Проверьте, был ли добавлен прослушиватель событий в React JS

Проверьте, был ли добавлен прослушиватель событий в React JS

#reactjs

Вопрос:

Я использую react js для создания своего приложения, а также для тестирования Enzyme и Jest. В моем компоненте у меня есть этот эффект использования:

 useEffect(() => {
  window.addEventListener('beforeunload', () => my
    function);

  return () => window.removeEventListener('beforeunload', () => my
    function);
}, []);

Я хочу протестировать 2 сценария:

  1. Если компонент был смонтирован , если было добавлено это событие window.addEventListener('beforeunload' ,
    2. Кроме того, если компонент был размонтирован, если событие было удалено return () => window.removeEventListener('beforeunload'
    Вопрос: Как протестировать эти 2 сценария? Я просмотрел примеры, но там я не нашел никаких идей. Кто сталкивался с этим?

Комментарии:

1. 1. Если вы не передали ту же функцию addEventListener removeEventListener методам и, прослушиватель событий не будет удален. 2. Вы можете запустить событие и проверить эффект события, например, какое-то сообщение, появляющееся в DOM и т. Д.

2. @Юсаф, не могли бы вы показать, пожалуйста? Будет очень полезно.

3. @Yousaf, но как протестировать эти 2 сценария?

Ответ №1:

addEventListener и removeEventListener работают только с одной и той же ссылкой на функцию. Вы должны объявить функцию перед ее использованием.

 useEffect(() => {
  const myFuntion = () => {...}
  window.addEventListener('beforeunload', myFuntion);

  return () => window.removeEventListener('beforeunload', myFunction);
}, []);

Вы можете увидеть это в официальной документации: https://reactjs.org/docs/hooks-effect.html#recap

вы можете проверить зарегистрированный прослушиватель событий в chrome devtools следующим образом: https://developers.google.com/web/updates/2015/05/get-and-debug-event-listeners

Комментарии:

1. но как протестировать эти 2 сценария?

2. проверьте эту ссылку для тестирования в chrome : developers.google.com/web/updates/2015/05/…

3. нет ничего, связанного с how to tes it using enzyme and jest

Метки: ,