【发布时间】：2022-01-18 19:05:16
【问题描述】：
我正在尝试在 VSCode 中调试 Jest 测试，但它无法解析某些模块。我设置了一个断点，下面调用jest.run 是argv
"--runInBand"
"--no-cache"
"--watchAll=false"
"--config"
"{\"roots\":[\"<rootDir>/src\"],\"collectCoverageFrom\":[\"src/**/*.{js,jsx,ts,tsx}\",\"!src/**/*.d.ts\"],\"setupFiles\":[\"/Users/username/projects/project-name/CSharpProjectName/src/ClientApp/node_modules/react-app-polyfill/jsdom.js\"],\"setupFilesAfterEnv\":[],\"testMatch\":[\"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}\",\"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}\"],\"testEnvironment\":\"jsdom\",\"testRunner\":\"/Users/username/projects/project-name/CSharpProjectName/src/ClientApp/node_modules/jest-circus/runner.js\",\"transform\":{\"^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$\":\"/Users/username/projects/project-name/CSharpProjectName/src/ClientApp/node_modules/react-scripts/config/jest/babelTransform.js\",\"^.+\\\\.css$\":\"/Users/username/projects/project-name/CSharpProjectName/src/ClientApp/node_modules/react-scripts/config/jest/cssTransform.js\",\"^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)\":\"/Users/username/projects/project-name/CSharpProjectName/src/ClientApp/node_modules/react-scripts/config/jest/fileTransform.js\"},\"transformIgnorePatterns\":[\"[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$\",\"^.+\\\\.module\\\\.(css|sass|scss)$\"],\"modulePaths\":[],\"moduleNameMapper\":{\"^react-native$\":\"react-native-web\",\"^.+\\\\.module\\\\.(css|sass|scss)$\":\"identity-obj-proxy\"},\"moduleFileExtensions\":[\"web.js\",\"js\",\"web.ts\",\"ts\",\"web.tsx\",\"tsx\",\"json\",\"web.jsx\",\"jsx\",\"node\"],\"watchPlugins\":[\"jest-watch-typeahead/filename\",\"jest-watch-typeahead/testname\"],\"resetMocks\":true,\"rootDir\":\"/Users/username/projects/project-name/CSharpProjectName/src/ClientApp\"}"
"--env"
"/Users/username/projects/project-name/CSharpProjectName/src/ClientApp/node_modules/jest-environment-jsdom/build/index.js"
我怀疑--env 的值是导致问题的原因。
作为参考，我的配置文件：
jest.config.js
module.exports = {
transform: {
"^.+\\.tsx?$": "ts-jest",
},
testRegex: "(.*)\\.(test|spec)\\.(jsx?|tsx?)$",
rootDir: "/Users/username/projects/project-name/CSharpProjectName/src/ClientApp",
modulePaths: [
"<rootDir>"
],
moduleDirectories: ["node_modules", "src"],
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
testEnvironment: "jsdom"
};
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/src/ClientApp/node_modules/.bin/react-scripts",
"args": ["test", "--runInBand", "--no-cache", "--watchAll=false", "--env=jsdom"],
"cwd": "${workspaceRoot}/src/ClientApp",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": { "CI": "true" },
"disableOptimisticBPs": true
}
]
}
目录结构：
project-name
└── CSharpProjectName
├── .vscode
│ ├── tasks.json
│ ├── launch.json
│ └── settings.json
├── Dockerfile
└── src
├── ClientApp
│ ├── jest.config.js
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ └── manifest.json
│ ├── src
│ │ ├── App.test.tsx
│ │ ├── App.tsx
│ │ ├── components
│ │ │ ├── Home.tsx
│ │ │ ├── Layout.tsx
│ │ │ └── NavMenu.tsx
│ │ ├── index.tsx
│ │ ├── react-app-env.d.ts
│ │ └── registerServiceWorker.ts
│ └── tsconfig.json
├── Program.cs
├── Startup.cs
├── CSharpProjectName.csproj
└── appsettings.json
然后我从CSharpProjectName 目录打开 VS Code。
编辑：
尝试使用cross-env 作为launch.json 中的可执行文件。也没有工作：
{
"version": "0.2.0",
"configurations": [
{
"name": "Cross Env Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/src/ClientApp/node_modules/.bin/cross-env",
"args": ["CI=true", "${workspaceRoot}/src/ClientApp/node_modules/.bin/react-scripts", "test", "--env=jsdom"],
"cwd": "${workspaceRoot}/src/ClientApp",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true
}
]
}
【问题讨论】：
-
当我也无法让 VS Code Jest 扩展工作时，我还查看了 stackoverflow.com/questions/48887321/…。尝试了干净的 VS Code 安装。没有骰子。
-
通过命令行运行它的输出是什么？
-
$ node_modules/.bin/react-scripts test --runInBand --no-cache --watchAll=false工作
标签： reactjs typescript jestjs vscode-settings vscode-debugger