Apollo Client v3.13+ 版本中 jest 假定时器与 useMutation 的兼容性问题分析

问题背景

在 Apollo Client 3.13 及以上版本中，开发者在使用 jest 的假定时器（fakeTimers）进行测试时，会遇到 React 的 act 警告。这个问题在之前的版本中并不存在，主要出现在包含 useMutation 钩子的测试用例中。

技术细节

这个问题的根源在于 Apollo Client 3.13 版本中对 mutation 处理逻辑的优化。具体来说，在 PR #12174 中，开发团队将 mutation 的 Promise 处理方式从链式调用改为直接传递回调函数：

旧版本代码：

return client
  .mutate(...)
  .then(onResolvedCb)
  .catch(onErrorCb)

新版本代码：

return client
  .mutate(...)
  .then(onResolvedCb, onErrorCb)

这种修改减少了 Promise 解析所需的 tick 时间，使得 mutation 完成回调的执行时机发生了变化。在测试环境中，特别是当使用 jest 的假定时器时，这种微小的时序变化会导致 React 的 act 警告出现。

解决方案

对于遇到此问题的开发者，有以下几种解决方案：

1. 使用 mutation 的 onCompleted 回调： 将需要在 mutation 完成后执行的操作移到 onCompleted 回调中，而不是在 await 之后执行。

someMutation({
  onCompleted: () => showSnackbar()
});

2. 调整测试时序： 在测试中适当添加 await 语句，确保所有异步操作完成后再进行断言。

3. 保持测试环境一致性： 理解测试环境与实际运行环境的差异，避免对异步操作的具体时序做出过于严格的假设。

最佳实践建议

1. 避免依赖具体实现细节： 测试不应该依赖于 mutation 完成的确切时间，因为在实际应用中网络请求的耗时是不确定的。

2. 优先使用官方推荐模式： 对于需要在 mutation 完成后执行的操作，优先考虑使用 onCompleted/onError 回调，而不是 await 模式。

3. 理解测试工具限制： 在使用假定时器进行测试时，要意识到它可能无法完全模拟真实环境中的异步行为。

总结

Apollo Client 3.13 版本的这一变更虽然带来了性能上的优化，但也影响了测试环境中的行为。开发者需要理解这种变化的本质，并相应调整自己的测试策略。通过采用更健壮的测试模式和回调方式，可以确保应用在各种环境下都能稳定运行。

这个问题也提醒我们，在编写测试时应该关注行为而非实现，这样才能构建出更加健壮和可维护的测试套件。