VSCode怎么配置Jest单元测试环境-VSCode-PHP中文网

vscode运行jest依赖项目本地jest命令，插件失效主因是命令未正确调用或源码映射失败；需配置"jest.jestcommandline":"npx jest"、显式设置testmatch、启用sourcemap与inlinesources，并重启vscode。

vscode怎么配置jest单元测试环境

VSCode 本身不运行 Jest，它只是调用你项目里已有的 jest 命令；插件（如 orta.vscode-jest）失效、点不动、断点不命中，90% 是因为命令根本没跑起来，或跑起来了但没对上源码。

VSCode 的 Jest 插件默认尝试调用全局 jest，而你的项目极大概率是靠 npx jest 或 yarn jest 调用本地 node_modules/.bin/jest。插件找不到可执行入口，就静默失败。

在集成终端里手动运行 npx jest --version，确认能输出版本号
打开 .vscode/settings.json，加这一行："jest.jestCommandLine": "npx jest"（pnpm 项目用 "pnpx jest"，yarn 用 "yarn jest"）
别写 "jest.pathToJest": "npx jest" —— 这个字段要填可执行文件路径，比如 "./node_modules/.bin/jest"（macOS/Linux）或 "./node_modules/jest/bin/jest.js"（Windows）
确保项目根目录有 jest.config.js 或 package.json 里含 "jest" 字段，否则插件连配置都读不到

不是插件坏了，是它压根没扫描到你的测试文件。Orta 插件默认只认 **/*.test.* 和 **/__tests__/**/* 下的文件，其他命名或路径一律忽略。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

如果你的测试文件叫 Button.unit.tsx 或放在 src/tests/ 下，必须在 jest.config.js 里显式配 testMatch：['<rootdir>/src/**/*.{test,spec}.{js,jsx,ts,tsx}']</rootdir>
别同时写 testRegex 和 testMatch —— 后者优先，前者会被忽略
改完配置后，必须重启 VSCode（不是重载窗口），否则旧缓存还在，插件仍按老规则扫描

这不是 VSCode 认错了，是 source map 没映射回 TS 源码。Jest 跑的是编译后的 JS，断点只能落在它实际执行的位置。

tsconfig.json 必须同时开启："sourceMap": true 和 "inlineSources": true（后者让源码嵌进 map 文件，避免路径解析失败）
jest.config.js 的 transform 规则要覆盖 .ts 文件：'^.+\.tsx?$': 'ts-jest'，漏掉 tsx 就会跳到 React 编译结果里
别在 setupFilesAfterEnv 里 throw 错误 —— 调试器还没 attach，进程就退出了，断点根本加载不了
调试前先看 Output → Testing 面板，复制它实际执行的命令（比如 npx jest --runInBand ...），粘到终端手动跑一遍，确认有没有 Cannot find module 类错误

VSCode 插件不会自动染色，它只从 coverage/lcov.info 解析数据。没有这个文件，或者路径不对，高亮就永远不会出现。

jest.config.js 至少得有：collectCoverage: true、coverageProvider: "v8"（不能是 "babel"）、coverageDirectory: "coverage"
.vscode/settings.json 里启用："jest.coverageEnabled": true，且 "jest.autoEnable": true
首次启用后，必须手动触发一次测试（Cmd+Shift+P → Jest: Start Runner），插件才会开始监听并解析 lcov.info
如果用了自定义 snapshotResolver 或把快照放到了非默认路径，覆盖率路径也可能被干扰 —— 先临时删掉这些定制项，验证基础链路通不通