Apollo Client 与 MSW 2.0 集成测试中的延迟问题分析

在基于 Apollo Client 3.11.8 和 MSW 2.x 的测试环境中，开发团队遇到了一个值得关注的技术问题。当使用 MSW 的 delay('infinite') 功能模拟长时间延迟响应时，测试结束时会出现"无法读取未定义的属性'result'"的错误。

问题现象

测试环境中，当使用 MSW 的 delay('infinite') 来模拟长时间未响应的网络请求时，测试结束后会抛出以下错误堆栈：

TypeError: Cannot read properties of undefined (reading 'result')
    at handleError
    at createHttpLink.js

深入调试发现，错误发生在 Apollo Client 的 handleError 函数中，该函数尝试访问 err.result 属性，但此时 err 参数却为 undefined。这表明在测试环境清理过程中，某些异步操作被意外中断，导致错误处理逻辑接收到了非预期的参数。

技术背景

Apollo Client 是一个功能强大的 GraphQL 客户端库，广泛应用于现代前端开发。MSW (Mock Service Worker) 则是一个流行的 API 模拟工具，特别适合在测试环境中拦截和模拟网络请求。两者的结合为前端测试提供了强大支持。

在测试场景中，delay('infinite') 通常用于模拟永远不会完成的网络请求，这对于测试超时处理和加载状态非常有用。然而，这种极端情况也更容易暴露底层实现的边界条件问题。

问题根源分析

经过深入研究，开发团队发现问题的根本原因与测试环境的清理机制有关：

1. 当测试使用 delay('infinite') 时，Apollo Client 的请求会保持挂起状态
2. 测试结束后，测试运行环境（如 Vitest）会尝试清理所有未完成的异步操作
3. 这种清理过程可能导致挂起的 Promise 被强制拒绝，但错误对象未能正确构造
4. Apollo Client 的错误处理函数 handleError 假设错误对象总是存在且具有特定结构，这在边界情况下不成立

解决方案

针对这个问题，开发团队提出了几种解决方案：

1. 防御性编程：修改 handleError 函数，增加对错误对象的空值检查

   export function handleError(err, observer) {
       if (err && err.result && err.result.errors && err.result.data) {
           // 原有逻辑
       }
   }
   

2. 环境升级：将测试环境中的 jsdom 从 16.7.0 升级到更高版本（如 26.1.0），因为早期版本的 AbortSignal 实现可能存在缺陷

3. 测试策略调整：在测试中使用有限的延迟而非无限延迟，并在测试结束时显式清理所有模拟请求

最佳实践建议

基于这一案例，我们总结出以下前端测试最佳实践：

1. 在使用极端模拟条件（如无限延迟）时，要特别注意测试环境的清理
2. 保持测试工具链（如 jsdom、Vitest 等）的及时更新
3. 对错误处理逻辑实施防御性编程，特别是处理来自外部环境的输入
4. 在模拟网络请求时，考虑使用可预测的延迟而非无限延迟
5. 为异步测试添加适当的超时机制，避免测试挂起

这一案例展示了现代前端开发中工具链集成的复杂性，也提醒我们在处理边界条件时需要更加谨慎。通过理解底层机制和采取防御性编程策略，可以构建更加健壮的前端测试体系。