如何在Jest中测试React应用的会话超时模态框？

你的测试代码存在两个核心问题：

1. 第一种写法使用真实setTimeout，Jest会同步执行代码，不会等待25分钟，直接调用screen.debug()时模态框还未触发。
2. 第二种写法先推进定时器再渲染组件，此时组件还未初始化内部的闲置检测定时器，推进操作不会对后续挂载的组件生效。

正确的测试步骤 #

要触发模态框，需要确保Jest的fake timers能捕获到组件初始化的定时器，再推进时间触发超时逻辑，具体流程如下：

1. 启用Fake Timers：让Jest接管所有定时器，避免真实等待时间。
2. 渲染组件：此时组件内部的闲置检测定时器会被注册到Jest的fake timer系统中。
3. 推进时间：将时间推进到超过25分钟的阈值。
4. 强制DOM更新：确保定时器触发的状态变化完成渲染。
5. 验证模态框存在：通过查询或调试确认模态框已显示。

完整测试代码示例 #

test('闲置25分钟后显示会话超时模态框', () => {
  // 启用fake timers
  jest.useFakeTimers();
  
  // 渲染应用组件
  render(<App />);

  // 推进时间至25.5分钟（1530000毫秒），超过阈值触发超时
  jest.advanceTimersByTime(1530000);

  // 触发React更新，确保状态变化后的DOM渲染完成
  act(() => {});

  // 验证模态框存在，或用screen.debug()查看DOM
  expect(screen.getByRole('dialog', { name: /会话超时/i })).toBeInTheDocument();
  screen.debug();

  // 测试结束后恢复真实timers，避免影响其他测试
  jest.useRealTimers();
});

额外注意事项 #

• 如果你的组件通过监听用户活动（如mousemove、keydown）重置闲置定时器，测试时要避免触发这些事件，确保闲置状态不被打断。
• 若使用第三方闲置检测库（如react-idle-timer），测试逻辑一致：先渲染组件，再推进时间，最后验证模态框。

内容的提问来源于stack exchange，提问作者Ralph David Abernathy