React项目升级msw至v2.0后Jest测试报TextEncoder未定义求助

AI 小北

2026-7-7

解决MSW v2升级后Jest测试报TextEncoder is not defined的问题

问题背景

React项目使用msw模拟接口，升级到v2.0后浏览器运行正常，但Jest测试全部失败，报错ReferenceError: TextEncoder is not defined。已尝试多种全局定义TextEncoder的方案但无效，依赖版本：node v18.14.2、npm v9.5.0、typescript v4.9.5、react v18.2.0、jest v27.5.1，通过craco test运行测试。

核心原因

MSW v2内部依赖Web API的TextEncoder/TextDecoder，但Jest 27默认的jsdom测试环境未全局暴露这两个对象；同时由于使用craco管理配置，单独的jest.config.js可能未被正确加载。

解决方案

方案1：通过Craco配置Jest Setup文件（推荐）

因为craco会接管Create React App的Jest配置，需在Craco配置中指定Setup文件来全局挂载TextEncoder：

修改项目根目录的craco.config.js：

module.exports = {
  jest: {
    configure: {
      setupFiles: ['<rootDir>/src/setupTests.js'],
    },
  },
};

在src/setupTests.js（TypeScript项目用setupTests.ts）中添加全局定义：

// ESModule/TypeScript 语法
import { TextEncoder, TextDecoder } from 'node:util';

globalThis.TextEncoder = TextEncoder;
globalThis.TextDecoder = TextDecoder;

// 若用CommonJS语法
// const { TextEncoder, TextDecoder } = require('node:util');
// globalThis.TextEncoder = TextEncoder;
// globalThis.TextDecoder = TextDecoder;

方案2：升级Jest到28+

Jest 28及以上版本默认使用jsdom 20+，该版本原生支持全局的TextEncoder/TextDecoder，无需手动配置。执行升级命令：

npm install --save-dev jest@^28.0.0 @types/jest@^28.0.0 babel-jest@^28.0.0

升级后可能需要微调Jest配置适配新版本。

方案3：单独升级jsdom版本

若不想升级Jest，可单独升级jsdom到v16+（支持TextEncoder的版本）：

npm install --save-dev jsdom@^20.0.0

然后在craco.config.js中补充配置：

module.exports = {
  jest: {
    configure: {
      testEnvironment: 'jsdom',
      testEnvironmentOptions: {
        customExportConditions: ['node', 'node-addons'],
      },
    },
  },
};