Как смоделировать eventListener при установке в componentDidMount ()

Question

Это мой компонент

class Foo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            ...
        };

        this.input = React.createRef();
    }

    componentDidMount() {
        const id = 'bar';
        let element = document.getElementById(id);
        element.addEventListener('transitionend', () => {
            this.setState({ ... });
        }, false);
    }

    ...

Когда я настраиваю свой тест следующим образом

import React from 'react';
import { mount } from 'enzyme';
import 'jsdom-global/register';

import Foo from './';

it('renders the component correctly', () => {
    const component = mount(
        <Foo />
    );

    component
        .unmount();
});

Я получаю

console.error node_modules / реагировать-dom / cjs / реагировать-dom.development.js: 16647 Вышеупомянутая ошибка произошла в компоненте: в Foo (создан WrapperComponent) в WrapperComponent

Рассмотрите возможность добавления границы ошибки в ваше дерево для настройки поведения обработки ошибок.● правильно отображает компонент TypeError: Невозможно прочитать свойство 'addEventListener' с нулевым значением

Я пытался

ReactDOM.render(<Foo />, document.body);

или добавить это

const map = {};
Window.addEventListener = jest.genMockFn().mockImpl((event, cb) => {
  map[event] = cb;
});

, а такжеэто

const map = {};
    document.addEventListener = jest.fn((event, cb) => {
      map[event] = cb;
    })

до монтажа <Foo /> в тесте.Но все возвращается с той же ошибкой.Почему это так?

Answer 1

Одной из причин, по которой прямой доступ к DOM не рекомендуется в React, является то, что это делает тестирование более сложным и непредсказуемым.

DOM может быть полностью смоделирован перед монтированием компонента:

const elementMock = { addEventListener: jest.fn() };
jest.spyOn(document, 'getElementById').mockImplementation(() => elementMock);

AЗаглушка может быть проверена, что она была вызвана правильно:

expect(elementMock.addEventListener).toBeCalledWith('transitionend', expect.any(Function), false);

И слушатель события может быть проверен, что он изменяет состояние, как ожидалось:

const handler = elementMock.mock.calls[0][1];
handler();
...