使用Jest-environment-jsdom集成MSW时出现TextEncoder未定义错误

问题原因 #

当使用jest-environment-jsdom测试环境时，jsdom默认没有全局暴露Node.js的TextEncoder和TextDecoderAPI，而MSW的Node端依赖（msw/node）需要用到这些API，因此抛出ReferenceError。

解决方案 #

方案1：在测试初始化文件中手动补全局API

修改setupTests.ts，在最顶部添加全局对象的赋值：

// 先补全缺失的全局API
import { TextEncoder, TextDecoder } from 'node:util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

// 原有代码
import '@testing-library/jest-dom/extend-expect';
import { server } from './mocks/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

方案2：升级jsdom版本

如果你的jsdom版本较低，可能本身未内置TextEncoder支持。执行以下命令升级到最新稳定版：

npm install jsdom@latest --save-dev
# 或用yarn
yarn add jsdom@latest --dev

方案3：调整Jest配置适配ES模块

由于你项目使用了type: module，确保Jest和ts-jest正确处理ES模块，在jest.config.json中添加以下配置：

{
  "preset": "ts-jest",
  "testEnvironment": "jest-environment-jsdom",
  "setupFilesAfterEnv": ["./setupTests.ts"],
  "moduleDirectories": ["node_modules", "<rootDir>"],
  "testEnvironmentOptions": {
    "customExportConditions": [""]
  },
  "transform": {
    "^.+\\.js$": "babel-jest"
  },
  // 添加ES模块适配配置
  "extensionsToTreatAsEsm": [".ts"],
  "globals": {
    "ts-jest": {
      "useESM": true
    }
  }
}

额外检查 #

确保你的tsconfig.test.json中包含必要的类型和库：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "types": ["jest", "jsdom"]
  }
}

内容的提问来源于stack exchange，提问作者Álvaro