React自定义useUnload Hook的Enzyme与Jest测试报错解决求助

你遇到的错误根源在于两点：一是你用React.Component类组件作为Hook的包裹容器，但没定义render方法；二是React Hook只能在函数组件的顶层作用域调用，不能像你那样把Hook作为props传入类组件。下面是完整的修复方案和测试代码：

第一步：修正Hook包裹组件 #

把你的HookWrapper改成函数组件，确保Hook在组件顶层调用，并且返回一个合法的React元素：

// 正确的Hook测试包裹组件
const HookTestComponent = ({ onUnload }) => {
  // 在函数组件顶层调用useUnload Hook
  useUnload(onUnload);
  // 必须返回一个React元素，哪怕是空div
  return <div>Test Component</div>;
};

第二步：完整的测试用例 #

我们需要测试三个核心场景：组件挂载时添加事件监听、卸载时移除监听、触发beforeunload时执行回调逻辑。这里是完整的测试代码：

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

const HookTestComponent = ({ onUnload }) => {
  useUnload(onUnload);
  return <div>Test Component</div>;
};

describe('useUnload Hook', () => {
  let mockOnUnload;
  let addEventListenerSpy;
  let removeEventListenerSpy;

  // 每个测试前初始化mock和spy
  beforeEach(() => {
    mockOnUnload = jest.fn();
    // 监听window的add/removeEventListener方法
    addEventListenerSpy = jest.spyOn(window, 'addEventListener');
    removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
  });

  // 每个测试后清理mock
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('注册beforeunload事件监听当组件挂载时', () => {
    mount(<HookTestComponent onUnload={mockOnUnload} />);
    
    expect(addEventListenerSpy).toHaveBeenCalledWith(
      'beforeunload', 
      expect.any(Function) // 验证注册了正确的事件和回调
    );
  });

  it('移除beforeunload事件监听当组件卸载时', () => {
    const wrapper = mount(<HookTestComponent onUnload={mockOnUnload} />);
    wrapper.unmount();
    
    expect(removeEventListenerSpy).toHaveBeenCalledWith(
      'beforeunload', 
      expect.any(Function) // 验证移除了对应的监听
    );
  });

  it('触发beforeunload事件时执行传入的回调', () => {
    mount(<HookTestComponent onUnload={mockOnUnload} />);
    
    // 获取Hook注册的事件回调函数
    const beforeunloadCallback = addEventListenerSpy.mock.calls[0][1];
    // 模拟事件对象
    const mockEvent = { preventDefault: jest.fn(), returnValue: '' };
    
    // 手动触发事件回调
    beforeunloadCallback(mockEvent);
    
    // 验证回调被调用，且事件处理逻辑正确
    expect(mockOnUnload).toHaveBeenCalledWith(mockEvent);
    expect(mockEvent.preventDefault).toHaveBeenCalled();
    expect(mockEvent.returnValue).toBe('');
  });
});

关键注意点 #

• Hook调用规则：永远不要在类组件、props、嵌套函数或条件判断里调用Hook，必须在函数组件的顶层作用域调用，这是React的强制规则。
• 事件监听的验证：通过Jest的spyOn方法监听window.addEventListener和removeEventListener，可以准确验证Hook的生命周期行为。
• 事件触发模拟：直接获取Hook注册的回调函数并手动调用，比模拟真实的页面卸载更可靠，因为Jest/Enzyme环境中很难模拟真实的beforeunload事件。

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