在 VSCode 中调试 JavaScript 的 Jest 测试用例

在 VSCode 中调试 JavaScript 的 Jest 测试用例需要以下步骤：

1. 配置 VSCode 调试环境（launch.json）

VSCode 调试 Jest 测试用例需要先配置调试文件，告诉 VSCode 如何启动 Jest 并附加调试器：

{
"version": "0.2.0",
"configurations": [
{
"name": "Jest 调试单个测试文件",
"type": "node",
"request": "launch",
"runtimeArgs": [
"–inspect-brk",
"${workspaceRoot}/node_modules/jest/bin/jest.js",
"–runInBand",
"${file}" // 只调试当前打开的测试文件（比如 sum.test.js），更聚焦
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"port": 9229,
"cwd": "${workspaceRoot}"
},
{
"name": "Jest 调试所有测试用例",
"type": "node",
"request": "launch",
"runtimeArgs": [
"–inspect-brk", // 让 Node.js 启动时暂停，等待调试器连接
"${workspaceRoot}/node_modules/jest/bin/jest.js",
"–runInBand" // 让 Jest 串行执行测试（避免多进程导致调试失效）
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"port": 9229,
"cwd": "${workspaceRoot}"
}
]
}

2. 设置断点（关键）

打开 sum.test.js 文件，在这些关键位置点击行号左侧的空白处（会出现红色小圆点，即断点）：

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
debugger; // 可选的显式断点
expect(sum(1, 2)).toBe(3); // 在此行添加断点
});

ps:断点是调试的核心，代码执行到断点处会暂停，你可以查看变量、逐行执行。

3. 启动调试

以「调试单个测试文件」为例（更高效）：

• 打开 processParams.test.js 文件（确保是当前激活的文件）；
• 回到「调试」面板，顶部下拉框选择「Jest 调试单个测试文件」；
• 点击调试面板的「启动调试」按钮（绿色三角形 ▶️），或按快捷键 F5。

调试启动后：

• 代码会先暂停在 Jest 的入口文件（无需关注），按 F5 继续执行，直到命中你设置的断点；
• 此时 VSCode 会进入「调试模式」，顶部出现调试控制栏，核心按钮功能：

4. 调试技巧

5. 调试过程中查看关键信息

暂停在断点处时，VSCode 右侧会显示调试面板，重点看这几个区域：

6. 总结