微前端项目VS Code配置Jest测试调试无效及配置文件找不到的解决方法求助

问题场景 #

开发微前端项目，已安装Jest调试扩展，代码中添加debugger语句后，测试执行全部代码但无法进入调试，同时出现配置文件查找错误。

现有配置 #

package.json 脚本配置 #

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-env -- react-scripts test",
    "test:coverage": "react-env -- react-scripts test --watchAll=false --coverage --collectCoverageFrom=src/{components,hooks,pages,layout,skeletons,utils}/**/*.{ts,tsx}",
    "eject": "react-scripts eject",
    "prestart": "react-env --",
    "eslint": "eslint --ext .js,.jsx,.ts,.tsx src",
    "eslint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix",
    "stylelint": "stylelint **/*.{css,scss}",
    "stylelint:fix": "stylelint --fix **/*.{css,scss}",
    "lint": "npm run eslint && npm run stylelint",
    "lint:fix": "npm run eslint:fix && npm run stylelint:fix",
    "docker:build": "docker build -t front .",
    "docker:start": "docker run -p 9000:3000 --env-file ./.env front"
},

.vscode/launch.json 配置 #

{
// put this inside /.vscode dir
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Jest: current file",
    //"env": { "NODE_ENV": "test" },
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "args": ["${fileBasenameNoExtension}", "--config", "jest.config.js"],
    "console": "integratedTerminal",
    "disableOptimisticBPs": true,
    "windows": {
      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
    }
  },
]
}

错误信息 #

调试器已附加。错误：解析配置文件路径时找不到根目录。

提供的待解析路径：jest.config.js

解决步骤 #

1. 检查jest.config.js文件状态
   使用react-scripts初始化的项目默认没有独立的jest.config.js，Jest会自动调用react-scripts内置的配置。如果没有手动生成过该文件，直接删除launch.json中--config jest.config.js这个参数即可。

2. 修改launch.json适配项目测试脚本逻辑
   项目测试脚本通过react-env -- react-scripts test启动，调试配置需要对齐这个逻辑，修改后的launch.json如下：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Jest: current file",
         "runtimeExecutable": "npm",
         "runtimeArgs": [
           "run",
           "test",
           "--",
           "${fileBasenameNoExtension}",
           "--watchAll=false"
         ],
         "console": "integratedTerminal",
         "disableOptimisticBPs": true
       }
     ]
   }
   

   这种方式直接调用项目的test脚本，自动加载react-env和react-scripts的配置，避免路径匹配问题。

3. 确保断点生效的额外检查

   • 确认测试文件转译时未移除debugger语句：检查babel.config.js或tsconfig.json中，test环境的转译配置是否保留了debugger。
   • 保持disableOptimisticBPs为true（已在原配置中开启），防止断点被Jest优化忽略。

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