React+Jest+Enzyme测试报错：ReferenceError: TextEncoder is not defined

我正在使用React v18、Jest v29.4.3和Enzyme-adapter-react-16测试React应用，测试代码如下：

测试文件代码 #

import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { shallow } from 'enzyme';
import App from './App';
import Notifications from '../Notifications/Notifications';
import { StyleSheetTestUtils } from 'aphrodite';

Enzyme.configure({ adapter: new Adapter() });

let wrapper;
    
beforeEach(() => {
  wrapper = shallow(<App />);
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});

describe('testing <App /> component', () => {

  it("<App /> is rendered without crashing", () => {
    expect(wrapper.render()).not.toBeNull();
  });

  it("<App /> contains the <Notifications /> Component", () => {
    expect(wrapper.contains(<Notifications />)).not.toBe(null);
  });
})

报错信息 #

FAIL  src/App/App.test.js
  ● Test suite failed to run

    ReferenceError: TextEncoder is not defined

      1 | import React from 'react';
      2 | import Enzyme from 'enzyme';
    > 3 | import Adapter from 'enzyme-adapter-react-16';
        | ^
      4 | import { mount, shallow } from 'enzyme';
      5 | import App from './App';
      6 | import Notifications from '../Notifications/Notifications';

      at node_modules/react-dom/cjs/react-dom-server.browser.development.js:145:19
      at Object.<anonymous> (node_modules/react-dom/cjs/react-dom-server.browser.development.js:7002:5)
      at Object.<anonymous> (node_modules/react-dom/server.browser.js:9:7)
      at Object.<anonymous> (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:5:1)
      at Object.require (node_modules/enzyme-adapter-react-16/src/index.js:2:18)
      at Object.require (src/App/App.test.js:3:1)
...

已尝试的无效方案 #

• 在测试文件顶部添加global.TextEncoder = TextEncoder; global.TextDecoder = TextDecoder;
• 在node_modules/whatwg-url/lib目录下添加配置文件并写入以下脚本：

'use strict';
const {TextDecoder, TextEncoder} = require('util')
const utf8Encoder = new TextEncoder();
const utf8Decoder = new TextDecoder("utf-8", { ignoreBOM: true });
function utf8Encoder(string) {
  return utf8Encoder.encode(string);
};

function utf8DecoderWithoutDom(bytes) {
  return utf8Decoder.decode(bytes);
};

module.exports = {
  utf8Encoder,
  utf8DecoderWithoutDom
}

方案1：在Jest全局配置中注入TextEncoder/TextDecoder #

Jest 29+ 默认使用jsdom环境，但可能存在环境变量缺失的情况。在项目根目录的jest.config.js（或package.json的jest字段）中添加配置：

module.exports = {
  // 其他已有配置...
  setupFilesAfterEnv: ['./jest.setup.js'],
};

然后创建jest.setup.js文件，写入：

// ESModule环境
import { TextEncoder, TextDecoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

// 若为CommonJS环境，改用：
// const { TextEncoder, TextDecoder } = require('util');
// global.TextEncoder = TextEncoder;
// global.TextDecoder = TextDecoder;

方案2：升级Enzyme适配包（推荐） #

enzyme-adapter-react-16本身不兼容React 18，这是核心矛盾之一。替换为支持React 18的适配包：

1. 卸载旧包：

npm uninstall enzyme-adapter-react-16

2. 安装新适配包：

npm install @wojtekmaj/enzyme-adapter-react-18 --save-dev

3. 修改测试文件中的适配配置：

// 替换原有导入
import Adapter from '@wojtekmaj/enzyme-adapter-react-18';

Enzyme.configure({ adapter: new Adapter() });

方案3：切换Jest测试环境（仅适用于无DOM需求的测试） #

如果上述方案无效，可尝试将Jest测试环境切换为node，但会失去DOM相关API支持：
在jest.config.js中修改：

module.exports = {
  testEnvironment: 'node',
};

内容的提问来源于stack exchange，提问作者Moez Ben Rebah