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

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

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

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

打开 VSCode 的「调试」面板（快捷键：Ctrl+Shift+D / Cmd+Shift+D）；
点击面板顶部的「创建 launch.json 文件」，选择「Node.js」模板；
替换自动生成的 launch.json 内容为以下配置（适配 Jest 调试）：

json 复制代码

{
  "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 文件，在这些关键位置点击行号左侧的空白处（会出现红色小圆点，即断点）：

javascript 复制代码

// 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. 调试技巧

按钮	快捷键	功能
▶️ 继续	`F5`	执行到下一个断点，无断点则直接运行完
⏭️ 单步跳过	`F10`	逐行执行代码（不进入函数内部）
⏬ 单步进入	`F11`	进入当前行的函数内部（比如进入 sum 函数）
⏫ 单步退出	`Shift+F11`	退出当前函数，回到调用处
⏹️ 停止	`Shift+F5`	终止调试

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

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

变量（Variables）：查看当前作用域的所有变量值
调用栈（Call Stack）：查看代码的执行路径
监视（Watch）：手动输入变量名，实时查看其值（适合重点关注的变量）。

6. 总结

调试 Jest 测试的核心是配置 launch.json（关键是--inspect-brk和--runInBand参数）；
断点要设置在关键判断处、变量转换处、返回值处，才能精准定位问题；
调试时重点查看「变量面板」，能直观看到每个变量的实际值，找到逻辑错误的根源。