MSW.js 中 response:mocked 事件请求对象为空的解决方案

事件监听中的请求对象问题

在使用 Mock Service Worker (MSW) 进行 API 模拟测试时，开发者经常会利用 worker.events.on('response:mocked') 生命周期事件来捕获和断言响应。然而，在 MSW 2.1.5 之前的版本中，开发者会遇到一个棘手的问题 - 事件回调中的 request 对象始终为 null。

问题表现

当按照官方文档配置如下代码时：

hooks.beforeEach(async function (this: TestContextWithMsw) {
    this.worker = setupWorker(...handlers);
    this.worker.events.on('response:mocked', ({ request, requestId, response }) => {
      this.handledRequests.push({ request, requestId, response });
    });
});

尽管在浏览器网络面板中能清晰看到 MSW 返回的响应，但在事件监听器内部调试时，request 对象却显示为 null。这给测试断言带来了困难，因为开发者无法获取发起请求的相关信息。

问题根源

这个问题的根本原因在于 MSW 内部的事件派发机制存在缺陷。在响应被模拟后派发事件时，请求对象的传递出现了问题，导致事件监听器无法接收到正确的请求实例。

解决方案

MSW 团队在 2.1.5 版本中修复了这个问题。开发者只需将 MSW 更新至最新版本即可：

npm install msw@latest

更新后，response:mocked 事件监听器将能正确接收到请求对象，使开发者能够完整地获取请求和响应信息进行测试断言。

相关改进

除了请求对象为空的问题外，开发者还报告了响应对象中 url 属性为空字符串的问题。MSW 团队已经在新 issue 中跟踪这个问题，并将在后续版本中修复。

最佳实践

对于需要断言 API 响应的测试场景，建议：

1. 确保使用 MSW 2.1.5 或更高版本
2. 在事件监听器中同时检查请求和响应对象
3. 对于关键测试，可以添加额外的验证逻辑确保所有必要字段都存在
4. 关注 MSW 的更新日志，及时获取问题修复

通过遵循这些实践，开发者可以更可靠地利用 MSW 的生命周期事件进行 API 测试和验证。