React单元测试报错：找不到react-router-dom模块求助

问题背景 #

我基于create-react-app搭建了大学课程的React项目，使用Jest和React Testing Library编写单元测试。测试文件中导入了以下模块：

import { BrowserRouter } from "react-router-dom";

package.json中已明确安装该依赖，但每次运行测试都会收到模块找不到的报错，尝试常规重新安装依赖的方法无效，目前考虑将项目转为Vite+React，寻求可行解决办法。

报错信息 #

Test suite failed to run

Cannot find module 'react-router-dom' from 'src/App.test.js'

  1 | import React from "react";
  2 | import { render, screen } from "@testing-library/react";
> 3 | import { BrowserRouter } from "react-router-dom";
    | ^
  4 | import App from "./App";

当前package.json内容 #

{  
  "name": "apoiaacao",  
  "version": "0.1.0",  
  "private": true,  
  "dependencies": {    
    "axios": "^1.7.9",    
    "bootstrap": "^5.3.3",    
    "cra-template": "1.2.0",    
    "react": "^18.2.0",    
    "react-confirm-alert": "^3.0.6",    
    "react-dom": "^18.2.0",    
    "react-router-dom": "^7.1.5",    
    "react-scripts": "^5.0.1",    
    "react-toastify": "^11.0.3",    
    "web-vitals": "^4.2.4"  
  },  
  "scripts": {    
    "start": "react-scripts start",    
    "build": "react-scripts build",    
    "test": "react-scripts test",    
    "eject": "react-scripts eject"  
  },  
  "eslintConfig": {    
    "extends": [      
      "react-app",      
      "react-app/jest"    
    ]  
  },  
  "browserslist": {    
    "production": [      
      ">0.2%",      
      "not dead",      
      "not op_mini all"    
    ],    
    "development": [      
      "last 1 chrome version",      
      "last 1 firefox version",      
      "last 1 safari version"    
    ]  
  },  
  "devDependencies": {    
    "@testing-library/jest-dom": "^6.6.3",    
    "@testing-library/react": "^16.2.0",    
    "eslint": "^8.57.1",    
    "eslint-config-prettier": "^10.0.2",    
    "jest": "^27.5.1",    
    "prettier": "3.5.2",    
    "prettier-eslint": "^16.3.0"  
  }
}

解决建议 #

方案一：修复现有CRA项目的问题 #

1. 版本兼容性调整
   react-router-dom@7.x属于预览版本，而react-scripts@5.0.1的生态支持尚未跟进，建议降级到稳定的v6.x版本：

   npm install react-router-dom@6.26.2
   

2. 彻底清理缓存与依赖

   • 删除旧依赖文件并重新安装：

     rm -rf node_modules package-lock.json
     npm install
     

   • 清除Jest缓存：

     npm test -- --clearCache
     

3. 检查配置与路径

   • 确认测试文件的导入路径无拼写错误
   • 若存在自定义jest.config.js，确保未排除react-router-dom模块

方案二：迁移到Vite+React #

如果上述方案无效，迁移到Vite是更高效的选择，步骤如下：

1. 创建新Vite项目

   npm create vite@latest my-vite-app -- --template react
   cd my-vite-app
   

2. 迁移代码与依赖

   • 将原项目src目录下的所有文件复制到新项目src目录
   • 安装原项目依赖：

     npm install axios bootstrap react-confirm-alert react-router-dom react-toastify
     

3. 配置测试环境

   • 安装测试依赖：

     npm install -D jest @testing-library/react @testing-library/jest-dom jsdom
     

   • 新建jest.config.js文件：

     export default {
       testEnvironment: 'jsdom',
       setupFilesAfterEnv: ['@testing-library/jest-dom'],
       moduleNameMapper: {
         '^@/(.*)$': '<rootDir>/src/$1'
       }
     }
     

   • 在package.json中添加测试命令：

     "scripts": {
       "test": "jest"
     }
     

4. 验证项目
   运行npm test确认测试正常执行，npm run dev确认项目启动无问题。

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