MSW.js 中 HttpResponse.json() 报错问题分析与解决方案

问题背景

在使用 MSW.js 进行 API 模拟测试时，开发人员可能会遇到一个看似简单但令人困惑的错误："TypeError: Right-hand side of 'instanceof' is not an object"。这个错误通常发生在尝试使用 HttpResponse.json() 方法返回模拟响应时。

错误现象

当开发人员在 Node.js 20 环境下运行测试时，虽然 MSW 成功拦截了请求并命中了正确的端点，但在返回 HttpResponse.json() 对象时却抛出上述类型错误。错误信息指向了 instanceof 操作符的右侧不是一个有效对象。

根本原因

经过深入分析，问题的根源在于 Node.js 环境中缺少必要的 Web API 实现。具体来说：

1. ReadableStream 是 Fetch API 实现的关键依赖
2. 开发人员最初尝试从 node:util 导入 ReadableStream，但这个模块并不包含该实现
3. 由于 ReadableStream 未正确定义，导致 MSW 内部在进行类型检查时失败

解决方案

正确的解决方法是确保所有必要的 Web API 在 Node.js 环境中得到正确实现：

// 正确的导入方式
const { ReadableStream } = require("stream/web");

完整的 polyfill 配置应包含以下关键组件：

1. 基础文本处理 API
2. 流处理 API
3. Fetch API 相关实现

最佳实践建议

1. 全面检查环境依赖：在使用 MSW.js 前，确保所有必要的 Web API 都已正确实现
2. 模块导入验证：对于 Node.js 环境中的 Web API 实现，应查阅官方文档确认正确的导入路径
3. 错误诊断技巧：遇到类似 "instanceof" 错误时，首先检查相关构造函数是否正确定义
4. 版本兼容性：虽然 MSW.js 声称支持 Node.js 20，但仍需注意某些 API 的实现细节可能因版本而异

总结

这个案例展示了在 Node.js 环境中使用浏览器 API 时可能遇到的典型问题。通过正确实现所有必要的 Web API 组件，可以确保 MSW.js 等工具的正常运行。开发者在配置测试环境时，应当特别注意这些底层依赖关系，以避免类似的隐蔽错误。

对于测试框架的配置，建议采用模块化的方式组织 polyfill，并确保每个组件都来自正确的来源。这种严谨的做法可以显著提高测试环境的稳定性和可靠性。