如何在componentDidMount（）中设置时模拟eventListener

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 / react-dom / cjs / react-dom.development.js：16647组件中出现上述错误：在WrapperComponent中的Foo（由WrapperComponent创建）中

考虑向树添加错误边界以自​​定义错误处理行为。 ●正确呈现组件TypeError：无法读取null的属性“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

在React中不鼓励直接DOM访问的原因之一是因为它使测试变得更加复杂和不可预测。

在安装组件之前，可以完全模拟DOM：

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

可以测试正确调用的存根：

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

并且可以测试事件监听器是否按预期更改状态：

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