如何使用Jest和Enzyme测试React组件中beforeunload事件监听器的挂载与移除？

嘿，我刚好碰到过类似的测试场景，这就给你一步步讲清楚怎么实现！首先得提个关键问题：你当前代码里的匿名函数会导致移除监听器失效，所以得先调整组件代码，再写测试。

你现在的useEffect里用了匿名函数() => my function，每次调用add/remove时都是创建新的函数引用，这样removeEventListener根本找不到要移除的那个监听器——不仅测试过不了，实际运行还会有内存泄漏。所以先把处理函数提取成具名函数：

import { useEffect } from 'react';

const MyComponent = () => {
  // 提取具名处理函数
  const handleBeforeUnload = () => {
    // 这里写你的业务逻辑，比如返回提示文本
    return "确定要离开当前页面吗？";
  };

  useEffect(() => {
    window.addEventListener('beforeunload', handleBeforeUnload);
    // 返回的清理函数用同一个引用
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, []);

  return <div>你的组件内容</div>;
};

export default MyComponent;

用Jest的spyOn监听window.addEventListener，然后挂载组件，断言这个方法被正确调用：

import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent 事件监听测试', () => {
  // 每个测试前清除mock，避免污染
  beforeEach(() => {
    jest.clearAllMocks();
    // 重置window的监听器残留
    window.removeEventListener('beforeunload', jest.fn());
  });

  it('组件挂载时应该添加beforeunload事件监听器', () => {
    // 监听window的addEventListener方法
    const addEventListenerSpy = jest.spyOn(window, 'addEventListener');

    // 挂载组件（用mount而不是shallow，因为shallow不会触发useEffect）
    mount(<MyComponent />);

    // 断言方法被调用1次，且参数正确
    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
    expect(addEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
  });

同样用spyOn监听window.removeEventListener，挂载后卸载组件，断言方法被调用：

it('组件卸载时应该移除beforeunload事件监听器', () => {
    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
    const component = mount(<MyComponent />);

    // 卸载组件
    component.unmount();

    // 断言移除方法被正确调用
    expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);
    expect(removeEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
  });

如果想更严谨，可以验证添加和移除的是同一个处理函数引用：

it('添加和移除的应该是同一个beforeunload处理函数', () => {
    const addSpy = jest.spyOn(window, 'addEventListener');
    const removeSpy = jest.spyOn(window, 'removeEventListener');

    const component = mount(<MyComponent />);
    // 获取添加的处理函数引用
    const handler = addSpy.mock.calls[0][1];

    component.unmount();

    // 断言移除的是同一个函数
    expect(removeSpy).toHaveBeenCalledWith('beforeunload', handler);
  });
});

• 必须用具名函数：匿名函数每次都是新引用，removeEventListener无法匹配，这是核心问题
• 用mount而非shallow：shallow渲染默认不会执行组件的useEffect，mount会完整渲染组件并触发生命周期钩子
• 清理mock：每个测试前用jest.clearAllMocks()清空调用记录，避免测试之间的干扰

内容的提问来源于stack exchange，提问作者Asking