使用react-testing-library渲染react-router-dom组件报错求助

问题详情 #

当前技术栈版本：

• react@18.3.0
• @testing-library/jest-dom@6.6.3
• @testing-library/react@13.4.0
• react-router-dom@7.3.0
• jsdom@16.7.0（受限于react-scripts@5.0.1内置版本，无法升级）

正常运行环境下，React Router DOM的组件（如Link、BrowserRouter、MemoryRouter）功能正常，但在测试环境用React Testing Library渲染这些组件时，会抛出TypeError: Cannot read properties of null (reading 'useRef')，同时伴随无效Hook调用警告。非React Router DOM带Hook的组件测试无此问题。

已尝试的排查手段：

• 校验各包版本兼容性（资料显示版本兼容）
• 升级相关依赖包
• 配置文件中替换jsdom版本
• 设置TextEncoders/Decoders
• 尝试多种RTL渲染方式

以上尝试均未解决问题，寻求可行方案。

解决方案尝试 #

1. 降级React Router DOM版本

react-router-dom@7.x与react-scripts@5.0.1内置的jsdom@16.7.0可能存在隐性兼容冲突。建议降级到react-router-dom@6.x（如6.26.0），该版本与React 18、RTL当前版本适配更稳定，可避开高版本路由与旧jsdom的适配问题。

2. 确保路由上下文正确注入

测试时必须将所有依赖路由上下文的组件包裹在MemoryRouter中，避免上下文缺失导致Hook调用异常。示例代码：

import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import TargetComponent from './TargetComponent';

test('渲染路由组件无报错', () => {
  render(
    <MemoryRouter>
      <TargetComponent />
    </MemoryRouter>
  );
  // 后续断言逻辑
});

3. 补全jsdom全局环境缺失项

在src/setupTests.js中添加以下配置，修复jsdom缺失的全局API：

import '@testing-library/jest-dom';

// 补全TextEncoder/TextDecoder
if (typeof globalThis.TextEncoder === 'undefined') {
  const { TextEncoder, TextDecoder } = require('util');
  globalThis.TextEncoder = TextEncoder;
  globalThis.TextDecoder = TextDecoder;
}

4. 排查重复React实例

项目中多个React实例会导致Hook调用异常，执行以下命令检查：

npm ls react

若输出显示多个React版本，删除node_modules和package-lock.json，重新安装依赖，确保所有依赖统一指向同一React版本。

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