React项目Jest全局test函数未识别及语法错误解决

一、解决VS Code无法识别全局test/expect等函数的问题 #

• 安装Jest的TypeScript类型定义：

  npm install @types/jest --save-dev
  

• 配置TypeScript识别全局类型：
  打开项目根目录的tsconfig.json，在compilerOptions字段中添加：

  "types": ["jest", "@testing-library/jest-dom"]
  

  或者在测试文件顶部添加triple-slash指令（临时方案）：

  /// <reference types="jest" />
  /// <reference types="@testing-library/jest-dom" />
  

• 重启VS Code的TypeScript服务（快捷键：Ctrl+Shift+P → 选择"TypeScript: Restart TS Server"）

二、解决"Jest encountered an unexpected token"错误 #

该错误通常因Jest无法处理项目语法（如JSX、ESModule）或配置冲突导致，按以下步骤排查：

1. 移除自定义Jest配置
   如果项目根目录存在jest.config.js/jest.config.ts，或package.json中有jest字段，直接删除——React Scripts 5内置了适配的Jest默认配置，自定义配置会覆盖内置规则引发冲突。

2. 确保Babel配置兼容
   旧项目若有自定义.babelrc或babel.config.js，需调整为适配React Scripts 5的规则：

   • 安装依赖：

     npm install customize-cra react-app-rewired --save-dev
     

   • 修改package.json的脚本：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-scripts eject"
     }
     

   • 根目录创建config-overrides.js：

     const { override, addBabelPreset } = require('customize-cra');
     module.exports = override(
       addBabelPreset('@babel/preset-react'),
       addBabelPreset('@babel/preset-typescript')
     );
     

3. 检查测试文件扩展名
   确保测试文件使用.test.tsx（React组件测试）或.test.ts（纯TS逻辑测试），React Scripts默认仅识别这类扩展名的测试文件。

4. 清除缓存并重装依赖

   # 清除Jest缓存
   npx jest --clearCache
   # 删除依赖目录与锁文件
   rm -rf node_modules package-lock.json
   # 重新安装依赖
   npm install
   

验证步骤 #

确认package.json中的test脚本为默认值（使用react-app-rewired的情况除外）：

"test": "react-scripts test"

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