ReactJS单元测试：如何使用Jest和Enzyme覆盖useEffect钩子中的代码？

当然可行！我之前在项目里也碰到过这个问题，其实只要掌握几个关键技巧，就能轻松把useEffect里的代码都覆盖到。下面给你一步步拆解具体做法：

• 优先使用mount()而非shallow()渲染组件
  函数组件的useEffect会在组件挂载时触发，shallow()渲染有时候不会完整触发钩子的执行逻辑，而mount()会模拟组件完整的挂载生命周期，能自动触发useEffect。示例代码：

  import { mount } from 'enzyme';
  import YourComponent from './YourComponent';
  
  test('covers useEffect on mount', () => {
    const wrapper = mount(<YourComponent />);
    // 此时useEffect已执行，可直接断言内部逻辑
  });
  

• 模拟依赖项变化，触发useEffect重新执行
  如果你的useEffect依赖于props或state，想要覆盖依赖更新时的逻辑，只需要更新对应的props/state即可触发钩子重新运行：

  test('covers useEffect on prop change', () => {
    const wrapper = mount(<YourComponent userId={1} />);
    // 第一次useEffect执行，覆盖初始逻辑
  
    wrapper.setProps({ userId: 2 });
    // 依赖项userId变化，触发useEffect再次执行，覆盖更新后的逻辑
  });
  

• 处理useEffect中的异步代码
  如果useEffect里有异步操作（比如API请求），需要先mock异步函数，再等待异步代码执行完成后再断言：

  import { mount } from 'enzyme';
  import YourComponent from './YourComponent';
  import { fetchUser } from './api';
  
  jest.mock('./api', () => ({
    fetchUser: jest.fn().mockResolvedValue({ id: 1, name: 'Test' })
  }));
  
  test('covers async logic in useEffect', async () => {
    const wrapper = mount(<YourComponent userId={1} />);
    
    // 等待异步Promise完成
    await Promise.resolve();
    wrapper.update(); // 更新组件状态
  
    expect(fetchUser).toHaveBeenCalledWith(1);
    // 断言组件渲染了异步获取的数据
    expect(wrapper.text()).toContain('Test');
  });
  

• 触发useEffect的清理函数
  如果useEffect返回了清理函数（比如取消订阅、清除定时器），可以通过组件卸载来触发这部分代码：

  test('covers useEffect cleanup function', () => {
    const mockCleanup = jest.fn();
    // 假设组件内部useEffect返回了这个mock函数
    jest.spyOn(YourComponent, 'cleanup').mockImplementation(mockCleanup);
  
    const wrapper = mount(<YourComponent />);
    wrapper.unmount(); // 卸载组件，触发清理函数
  
    expect(mockCleanup).toHaveBeenCalled();
  });
  

总的来说，Jest和Enzyme完全支持覆盖useEffect中的代码，核心就是模拟组件的完整生命周期，以及钩子依赖的变化场景。

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