React Error: Exceeded timeout of 5000 ms for a test. 错误

为React项目编写单元测试时报错Error: thrown: "Exceeded timeout of 5000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

检查上下代码后是发现使用了jest.useFakeTimers()。

原来在beforeEach中使用了jest.useFakeTimers()，所以每个case都会使用假计时器，所以去掉了beforeEach里的jest.useFakeTimers()，然后只在需要假计时器的Case里useFakeTimers，并且在afterEach中再切换回实时计时器。

这样就不报错了，问题解决。

为什么使用了假计时器Fake Timers？

在某些情况下，当您的代码使用计时器（setTimeout、setInterval、clearTimeout、clearInterval）时，您的测试可能会变得不可预测、缓慢和脆弱。

为了解决这些问题，或者如果需要依赖代码中的特定时间戳，大多数测试框架都提供了将测试中的实时计时器替换为假计时器的选项。这应该偶尔使用，而不是定期使用，因为使用它会产生一些开销。

在测试中使用假计时器时，测试中的所有代码都使用假计时器。

设置假计时器的常见模式通常在beforeEach中，例如：

// Fake timers using Jest
beforeEach(() => {
  jest.useFakeTimers()
})

当使用假计时器时，需要记住在测试运行后恢复计时器。这样做的主要原因是为了防止在测试完成后运行的第三方库（例如清理函数）耦合到假计时器，而使用真计时器。

为此，通常在afterEach中调用useRealTimers。

在切换到实时计时器之前，还必须调用runOnlyEndingTimers。这将确保您在切换到实时计时器之前刷新所有挂起的计时器。如果你不使用定时器，而只是切换到实时定时器，那么预定的任务就不会被执行，会得到意想不到的行为。这对于第三方来说非常重要，因为他们在你没有意识到的情况下安排任务。

下面是一个使用jest的例子：

// Running all pending timers and switching to real timers using Jest
afterEach(() => {
  jest.runOnlyPendingTimers()
  jest.useRealTimers()
})