Jest测试React组件时如何避免setInterval干扰其他测试用例

出现这个问题本质是两个原因：

1. 部分测试用例跑完后没有正确卸载渲染的组件，你写在componentWillUnmount里的clearInterval逻辑根本没执行，遗留的setInterval回调一直挂在事件循环里，测试进程检测到未完成的异步任务自然不会退出
2. 测试时用了真实的定时器，10秒的等待时间会实打实计入测试耗时，用例一多整体运行时间会被拖得很长

按优先级依次处理就能彻底解决：

• 保证每个测试用例结束后必然触发组件卸载
  不管你用Enzyme还是React Testing Library这类测试工具，渲染组件时都会返回unmount方法。你可以在全局afterEach钩子里统一执行卸载，不用每个用例单独写，确保组件的卸载生命周期一定触发，组件内部的清理逻辑正常跑。
  参考写法（以React Testing Library为例）：

  import { render } from '@testing-library/react';
  import Example from './Example';
  
  describe('Example组件测试', () => {
    let cleanup;
    beforeEach(() => {
      const { unmount } = render(<Example />);
      cleanup = unmount;
    });
    afterEach(() => {
      cleanup();
    });
  
    // 具体测试用例写在这一块
  });
  

• 测试环境替换为假定时器，消除真实等待开销
  Jest/Vitest这类主流测试框架都内置了假定时器能力，不需要真的等10秒就能触发定时回调，也不会在事件循环中挂载真实的计时任务：
  • 测试套件开头执行jest.useFakeTimers()开启假定时器
  • 需要验证定时保存逻辑时，直接调用jest.advanceTimersByTime(10000)快进10秒，定时器回调会立刻同步执行，没有任何等待
  • 套件执行完后调用jest.useRealTimers()切回真实定时器，避免污染其他测试文件
    参考测试写法：

  beforeEach(() => {
    jest.useFakeTimers();
  });
  afterEach(() => {
    jest.useRealTimers();
    jest.clearAllTimers();
  });
  
  test('间隔10秒应该触发本地保存', () => {
    const saveSpy = jest.spyOn(Example.prototype, 'saveDataLocally').mockReturnValue(undefined);
    render(<Example />);
    
    jest.advanceTimersByTime(10000);
    expect(saveSpy).toHaveBeenCalledTimes(1);
  
    jest.advanceTimersByTime(10000);
    expect(saveSpy).toHaveBeenCalledTimes(2);
    
    saveSpy.mockRestore();
  });
  

• 加全局兜底清理逻辑
  在测试setup文件的afterEach钩子中统一调用clearAllTimers，哪怕单个用例漏写了卸载逻辑，也能把所有遗留的定时任务清干净，彻底避免测试进程卡死不退出的问题。

额外排查点：你贴的代码里componentDidMound是拼写错误，正确的生命周期名称是componentDidMount，如果实际运行代码里也有这个拼写问题，会导致定时器初始化、清理逻辑完全不按预期执行，先确认下这个低级错误。

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