React/Jest/React-Testing-Library测试时Jest无法识别文件修改如何解决

第一步：清除项目构建缓存 #

手动删除项目根目录下的 .parcel-cache、dist 文件夹，Parcel 生成的预编译旧产物会导致 Jest 优先读取缓存而非最新源码。

第二步：禁用 Babel 缓存 #

修改 package.json 中的测试脚本，同时禁用 Babel 和 Jest 缓存：

• Mac/Linux 环境：

"test": "BABEL_DISABLE_CACHE=1 jest --no-cache"

• Windows 环境：

"test": "set BABEL_DISABLE_CACHE=1 && jest --no-cache"

第三步：验证 Jest 静态资源 Mock 配置生效 #

你在 package.json 中配置的 moduleNameMapper 依赖对应的 Mock 文件，先确认根目录存在 __mocks__ 文件夹，且文件夹内包含以下两个文件：

1. fileMock.js 内容：

module.exports = 'test-file-stub';

2. styleMock.js 内容：

module.exports = {};

如果项目根目录存在单独的 jest.config.js 文件，你在 package.json 中写的 Jest 配置会被覆盖，需要把 moduleNameMapper 配置迁移到 jest.config.js 中才能生效。

第四步：排查残留引用 #

全局搜索项目中所有文件的 moai 关键词，确认：

• 没有其他组件、入口文件残留对 moai.ico 的引用
• JSX 语法中的注释使用 {/* 注释内容 */} 格式，避免 // 注释未生效导致代码仍被解析

第五步：重置依赖缓存 #

如果以上操作都无效，删除依赖及锁文件后重新安装：

rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
# 对应使用的包管理器执行安装命令
npm install
# 或 yarn install / pnpm install

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