Jest React：如何模拟 componentDidMount 中设置的 window eventListener

Question

这里我需要在 window eventListener 中添加 handleBeforeUnload 测试，但我收到错误，我将如何解决它？

   expect(jest.fn())[.not].toHaveBeenCalled()

    Matcher error: received value must be a mock or spy function

    Received has value: undefined

    map.beforeunload();
    
   expect(wrapper.handleBeforeUnload).toHaveBeenCalled();

我的组件

componentDidMount() {
       window.addEventListener('beforeunload', (event) => {
      this.handleBeforeUnload();
    });
}

handleBeforeUnload () {
}

我的测试规格：

  it('should call handleBeforeUnload', () => {
    const historyMock = { listen: jest.fn(), replace: jest.fn() };
    const map = {};
    window.addEventListener = jest.fn((event, cb) => {
      map[event] = cb;
    });
    const wrapper = shallow(
      <AppRoutes history={historyMock} getDctkConfig={getDctkConfig} />,
    );

    map.beforeunload();

    expect(wrapper.handleBeforeUnload).toHaveBeenCalled();

  });

Answer 1

您没有窥探组件 class 的 .handleBeforeUnload() 方法。你可以通过Component.prototype.handleBeforeUnload窥探它。此外，您可以模拟.addEventListener()方法的实现并手动调用监听函数。

index.tsx:

import React, { Component } from 'react';

export default class AppRoutes extends Component {
  componentDidMount() {
    window.addEventListener('beforeunload', (event) => {
      this.handleBeforeUnload();
    });
  }

  handleBeforeUnload() {}

  render() {
    return <div>app routes</div>;
  }
}

index.test.tsx:

import { shallow } from 'enzyme';
import React from 'react';
import AppRoutes from './';

describe('69346085', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });
  test('should pass', () => {
    const handleBeforeUnloadSpy = jest.spyOn(AppRoutes.prototype, 'handleBeforeUnload');
    jest
      .spyOn(window, 'addEventListener')
      .mockImplementation((type: string, listener: EventListenerOrEventListenerObject) => {
        typeof listener === 'function' && listener({} as Event);
      });
    shallow(<AppRoutes />);

    expect(handleBeforeUnloadSpy).toHaveBeenCalled();
  });
});

测试结果：

PASS  examples/69346085/index.test.tsx (9.191 s)
  69346085
    ✓ should pass (7 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.814 s, estimated 10 s

Jest React：如何模拟 componentDidMount 中设置的 window eventListener

Jest React: How to mock window eventListener set in componentDidMount

reactjs

jestjs

enzyme