React Hooks测试中什么时候用waitForNextUpdate而非act+jest.advanceTimersByTime？

核心区别 #

两者的底层逻辑完全不同，核心差异如下：

• waitForNextUpdate 是 @testing-library/react-hooks 提供的异步监听工具，本质是监听hook的重渲染事件，默认超时时间为1000ms，你遇到的报错就是因为10秒的定时器超过了默认超时阈值导致的，手动传入timeout参数调整阈值即可解决：await waitForNextUpdate({ timeout: 11000 })。它不会篡改任何运行时逻辑，会真实等待异步逻辑执行完成、hook触发重渲染后再返回。
• act() + jest.advanceTimersByTime() 是依赖Jest假定时器能力的组合方案，本质是直接篡改时间线，跳过等待过程，立刻执行所有到期的定时器回调，不管你设置的延迟是10秒还是10小时，只要传入对应的时间量，就能立刻触发回调，完全不需要真实等待，所以不会出现超时问题。其中act的作用是包裹状态更新操作，确保React把所有状态更新、副作用执行完毕后再往下执行断言。
• 兼容性范围不同：jest.advanceTimersByTime 只能处理setTimeout/setInterval这类基于定时器的异步逻辑，对接口请求、Promise链、async/await等其他异步场景完全无效；waitForNextUpdate 不关心异步逻辑的实现方式，只要最终会触发hook的状态重渲染，就能监听到。

只能使用waitForNextUpdate的场景 #

以下场景无法用act() + jest.advanceTimersByTime()替代：

• 异步逻辑不是基于定时器实现的场景：比如hook内部发起接口请求，拿到返回结果后更新状态，这类场景假定时器完全无法触发回调，只能用waitForNextUpdate等待更新。
• 无法确定异步延迟时长的场景：比如异步逻辑的延迟是动态计算的、或者来自你无法修改的第三方依赖，你没法确定要把时间快进多久，这时候用waitForNextUpdate只需要等待更新触发即可，不需要感知具体的延迟数值。
• 不允许使用假定时器的场景：如果你的测试需要保留真实的定时器运行逻辑，不想用假定时器污染测试上下文，就只能用waitForNextUpdate实现异步等待。

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