MSW.js 中非确定性 ECONNREFUSED 错误的分析与解决方案

问题背景

在使用 MSW.js（Mock Service Worker）进行前端测试时，开发者可能会遇到一个棘手的非确定性错误：ECONNREFUSED（连接拒绝）。这种错误表现为测试用例间歇性失败，特别是在连续发起多个网络请求的场景下。

错误现象

当测试用例中包含多个连续的 fetch 请求时，例如：

await fetch('http://localhost:8000/account')
await fetch('http://localhost:8000/user')
await fetch('http://localhost:8000/account')
await fetch('http://localhost:8000/user')

测试可能会随机失败，并抛出以下错误：

Error: connect ECONNREFUSED ::1:8000
Error: connect ECONNREFUSED 127.0.0.1:8000

根本原因

这个问题的核心在于 MSW.js 的异步处理机制。MSW.js 在拦截请求时使用了 Service Worker，而 Service Worker 的注册和激活过程是异步的。当测试用例执行速度过快时，可能会出现以下情况：

1. 第一个请求到达时，Service Worker 尚未完全激活
2. 测试环境尝试直接连接到实际网络而不是被拦截的 mock 请求
3. 由于没有真实的服务器在运行，导致连接被拒绝

解决方案

经过社区验证，最有效的解决方案是双重刷新 Promise。这是因为：

1. 第一次刷新确保 Service Worker 注册完成
2. 第二次刷新确保所有拦截逻辑完全就绪

具体实现方式：

// 在测试用例开始前
await flushPromises()
await flushPromises()

最佳实践

为了避免类似问题，建议在 MSW.js 测试中遵循以下原则：

1. 始终在测试开始前等待 Service Worker 完全就绪
2. 对于包含多个连续请求的测试用例，适当增加等待时间
3. 考虑使用测试框架提供的异步处理工具（如 Vitest 的 flushPromises）

总结

MSW.js 作为强大的 API 模拟工具，在测试中偶尔会出现这类非确定性错误。理解其底层工作原理并采用双重刷新 Promise 的策略，可以有效解决 ECONNREFUSED 问题，确保测试的稳定性和可靠性。这种解决方案不仅适用于简单的测试场景，也能应对复杂的多请求交互测试。