Enzyme не может обработать рендеринг из-за импортированного скрипта, использующего addEventListener

Question

Короче говоря, у меня есть приложение React, которое импортирует компонент vanilla.js.Этот компонент взаимодействует с DOM вне приложения React, но иногда приложению React необходимо использовать этот компонент.Когда я пытаюсь выполнить рендеринг компонента React, который импортирует компонент Login, Jest зависает над «addEventListener» в компоненте Login vanilla.js:

TypeError: Cannot read property 'addEventListener' of null

  90 |     }
  91 |
> 92 |     document.querySelector(config.selectors.loginModal).addEventListener('click', (e) => closeLogin(e));
     |     ^
  93 |     document.querySelector(config.selectors.loginClose).addEventListener('click', (e) => closeLogin(e));
  94 |   };

Итак, у меня есть приложение реакции:

import React from 'react';
import Login from '../login';
const Component = () => {
  return (
    <h3>
      <span className='cc-stats-login-btn' onClick={(e) => 
      Login.openRegister(e, 'Statistics')}>Register</span>
      or
      <span className='cc-stats-login-btn' onClick={(e) => Login.openLogin(e, 'Statistics')}>login</span>
      to view advanced analytics and graphs
    </h3>
  );
};

Тест для этого приложения в настоящее время выглядит следующим образом:

document.body.innerHTML =
  '<div class="login-modal-bg">' +
  '  <div class="login-modal-close"></div>' +
  '</div>';

describe('<Component />', () => {
  test('renders', () => {
    const wrapper = shallow(
      <Component />
    );
    expect(wrapper.exists()).toBe(true);
  });
});

JS для компонента входа, на котором Jest, по-видимому, не работает:

const Login = (() => {
  const config = {
    selectors: {
      loginModal: '.login-modal-bg',
      loginClose: '.login-modal-close'
    }
  };

  [...]

  const initialize = () => {
    document.querySelector(config.selectors.loginModal).addEventListener('click', (e) => closeLogin(e));
    document.querySelector(config.selectors.loginClose).addEventListener('click', (e) => closeLogin(e));
  };
};

НасколькоЯ могу сказать, основываясь на документах Jest, все, что мне нужно, это простая строка как «mock dom», и addEventListener должен работать.Но все, что я получаю, это вышеупомянутая ошибка типа.Есть идеи?

Answer 1

Тестирование на DOM (это не реально в Jest, потому что он использует JSDOM) в модульных тестах предоставляет дополнительные движущиеся части.Вместо этого можно смоделировать document.querySelector:

const loginModalMock = jest.fn();
const loginCloseMock = jest.fn();

jest.spyOn(document, 'querySelector')
.mockReturnValue()
.mockReturnValueOnce({ addEventListener: loginModalMock })
.mockReturnValueOnce({ addEventListener: loginCloseMock })

const wrapper = shallow(
  <Component />
);

...

В этом конкретном случае document.querySelector используется не в тестируемом модуле.Модуль, который его использует, можно смоделировать в верхней части тестового файла:

jest.mock('.../login', () => ({ openLogin: jest.fn() }));