解决MSWJS项目中"instanceof右侧不是对象"的错误

在使用MSWJS(Mock Service Worker)进行前端测试时，开发者可能会遇到一个棘手的TypeError错误："Right-hand side of 'instanceof' is not an object"。这个错误通常发生在Node.js环境下运行测试时，特别是在升级到较新版本的MSW后。

错误背景

这个错误源于JavaScript的instanceof操作符需要右侧是一个有效的构造函数或类。当Node.js环境中缺少某些Web API的polyfill时，MSW在尝试创建模拟响应对象时会抛出这个错误。

根本原因

问题的核心在于Node.js环境缺少浏览器中常见的Web API实现，特别是：

1. TextEncoder/TextDecoder API
2. Streams API(特别是ReadableStream和TransformStream)
3. Fetch API及其相关对象(Response, Request等)

完整解决方案

要彻底解决这个问题，需要在测试设置文件中添加所有必要的polyfill。以下是完整的解决方案：

/**
 * Node.js全局polyfill配置
 * 这些必须在特定顺序下require，因为"undici"依赖"TextEncoder"全局API
 */
const { TextDecoder, TextEncoder } = require('node:util');
const { ReadableStream, TransformStream } = require('node:stream/web');

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  ReadableStream: { value: ReadableStream },
  TransformStream: { value: TransformStream },
});

const { Blob, File } = require('node:buffer');
const { fetch, Headers, FormData, Request, Response } = require('undici');

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
});

关键点说明

1. 模块导入顺序很重要：必须先导入TextEncoder/TextDecoder，再导入其他API

2. 正确的导入路径：

   • Stream相关API必须从'node:stream/web'导入
   • 工具类API从'node:util'导入
   • Blob等从'node:buffer'导入

3. 全局挂载：使用Object.defineProperties将这些API挂载到globalThis上

4. 完整API集合：解决方案中包含了所有必要的Web API polyfill，包括：

   • 文本编码/解码API
   • 流处理API
   • Fetch API及其相关对象
   • 二进制数据处理API

为什么需要这些polyfill

MSW在Node.js环境下运行时，需要模拟浏览器环境中的许多Web API。较新版本的MSW对运行环境有更严格的要求，需要完整的Web API支持才能正确创建模拟请求和响应对象。缺少任何一个关键API都可能导致类型检查失败，从而出现"instanceof右侧不是对象"的错误。

替代方案

如果觉得维护这些polyfill比较复杂，可以考虑：

1. 使用更现代的测试运行器(如Vitest)，它们对Web API有更好的内置支持
2. 使用jsdom环境运行测试，它提供了更完整的浏览器API模拟

总结

通过正确配置所有必要的Web API polyfill，可以彻底解决MSWJS在Node.js测试环境中出现的"instanceof"类型错误。这个解决方案已经被多位开发者验证有效，适用于大多数使用MSW进行前端测试的场景。关键在于确保测试环境拥有所有必需的浏览器API实现，并按照正确的顺序加载它们。