升级react-router至7.1.1后Jest测试出现TextEncoder未定义错误

问题原因 #

React Router 7.x 内部新增了对 TextEncoder API 的依赖，但 Jest 默认使用的 jsdom 环境（尤其是旧版本）没有在全局对象中提供这个 API。而 React Router 6.x 版本要么未使用该 API，要么内部做了兼容处理，所以升级后才触发这个报错。另外，React Router 7.x 合并了原 react-router-dom 的部分功能，但测试环境的全局对象补全逻辑没同步更新。

修复方案 #

1. 全局补全 TextEncoder/TextDecoder #

在项目的测试初始化文件中添加全局对象补全：

• 如果是 Create React App 项目，直接在 src/setupTests.js 中加入：

import { TextEncoder, TextDecoder } from 'util';

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

• 如果自定义了 Jest 配置（jest.config.js），可以在 setupFilesAfterEnv 指向的文件中添加上述代码。

2. 升级 jsdom 版本 #

低版本 jsdom 不支持 TextEncoder 全局 API，升级到 20.x 及以上版本即可解决：

npm install jsdom@latest --save-dev

3. 回退到稳定版本（应急方案） #

如果上述方法暂时无法落地，回退到之前能正常运行的版本组合：

npm uninstall react-router
npm install react-router@6.26.2 react-router-dom@6.27.0

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