使用Jest/Enzyme测试React应用时事件监听器Mock异常求助

你遇到的崩溃和警告，本质是因为直接mock全局的addEventListener和removeEventListener破坏了React自身的事件系统。

React在组件挂载、卸载过程中，会依赖原生的事件监听方法来管理合成事件（比如点击、输入等事件的处理）。当你用空实现替换这些全局方法后，React在unmount时无法正常清理自己的内部事件监听，进而引发崩溃（shallow渲染时内部依赖未被满足）或警告（mount渲染时React检测到事件未正确清理）。

下面提供两种可行的修复方式，按推荐程度排序：

方案1：仅拦截目标事件，保留原生方法实现 #

如果你的组件只需要测试resize事件的添加/移除，我们可以在mock时只针对resize事件做统计，其他事件仍然调用原生方法，这样既不影响React的内部逻辑，又能验证你的组件行为：

it('should add and remove resize event handler', () => {
  // 先保存原生方法的引用，避免后续丢失
  const originalAdd = global.addEventListener;
  const originalRemove = global.removeEventListener;

  // 统计resize事件的调用次数
  let resizeAddCalls = 0;
  let resizeRemoveCalls = 0;

  // 自定义mock：只拦截resize事件，其他事件走原生逻辑
  const addSpy = jest.spyOn(global, 'addEventListener').mockImplementation((event, handler) => {
    if (event === 'resize') {
      resizeAddCalls++;
    } else {
      originalAdd.call(global, event, handler);
    }
  });

  const removeSpy = jest.spyOn(global, 'removeEventListener').mockImplementation((event, handler) => {
    if (event === 'resize') {
      resizeRemoveCalls++;
    } else {
      originalRemove.call(global, event, handler);
    }
  });

  // 渲染组件（shallow或mount都可以）
  const wrapper = mount(<YourComponent />);
  // 验证resize监听被添加
  expect(resizeAddCalls).toBe(1);

  // 卸载组件
  wrapper.unmount();
  // 验证resize监听被移除
  expect(resizeRemoveCalls).toBe(1);

  // 恢复原生方法，避免影响后续测试
  addSpy.mockRestore();
  removeSpy.mockRestore();
});

方案2：Mock组件内部的事件监听逻辑（更推荐） #

如果你的组件是在componentDidMount（类组件）或useEffect（函数组件）中直接调用window.addEventListener，可以直接mockwindow上的方法，同时确保在测试结束后恢复原生实现：

类组件示例 #

// 你的组件代码
class YourComponent extends React.Component {
  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize = () => { /* 你的处理逻辑 */ }
}

// 测试代码
it('should add and remove resize event handler', () => {
  // Mock window的事件方法
  const addSpy = jest.spyOn(window, 'addEventListener').mockImplementation(() => {});
  const removeSpy = jest.spyOn(window, 'removeEventListener').mockImplementation(() => {});

  const wrapper = mount(<YourComponent />);
  // 验证组件调用了resize监听添加
  expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function));

  wrapper.unmount();
  // 验证组件调用了resize监听移除
  expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function));

  // 恢复原生方法
  addSpy.mockRestore();
  removeSpy.mockRestore();
});

函数组件（useEffect）示例 #

// 你的组件代码
function YourComponent() {
  useEffect(() => {
    const handleResize = () => { /* 你的处理逻辑 */ };
    window.addEventListener('resize', handleResize);
    // 清理函数
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div />;
}

// 测试代码
it('should add and remove resize event handler', () => {
  const addSpy = jest.spyOn(window, 'addEventListener').mockImplementation(() => {});
  const removeSpy = jest.spyOn(window, 'removeEventListener').mockImplementation(() => {});

  const wrapper = mount(<YourComponent />);
  expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function));

  wrapper.unmount();
  expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function));

  addSpy.mockRestore();
  removeSpy.mockRestore();
});

• 一定要在测试结束后调用mockRestore()，否则这些mock会影响其他测试用例的执行。
• 如果你使用shallow渲染，类组件的生命周期方法（如componentDidMount）会正常执行，但函数组件的useEffect在Enzyme的shallow模式下可能存在一些限制，建议对函数组件优先使用mount进行测试。

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