在VS Code中为Jest测试用例设置断点-VSCode-PHP中文网

在VS Code中为Jest测试用例设置断点

P粉986688829

发布： 2025-12-02 21:18:03

原创

421人浏览过

首先确保Jest以--inspect-brk模式运行并在launch.json中配置Attach调试，然后通过npm run test:debug启动测试并用F5连接，断点即可生效。

在vs code中为jest测试用例设置断点

在 VS Code 中为 Jest 测试用例设置断点，可以让你调试测试代码时更直观地查看变量值、调用栈和执行流程。整个过程不需要复杂的配置，只要正确启动 Jest 的调试模式即可。

启用 Jest 调试模式

Jest 默认不会暂停执行来等待调试器连接，因此需要以 --inspect 或 --inspect-brk 模式运行。

推荐在 package.json 中添加一个调试脚本：

"scripts": {
  "test:debug": "node --inspect-brk -r ts-node/register ./node_modules/jest/bin/jest.js --runInBand"
}

登录后复制

说明：

--inspect-brk：让 Node 在第一行代码暂停，确保有时间连接调试器。
-r ts-node/register：如果你使用 TypeScript，这能支持直接运行 ts 文件。
--runInBand：防止 Jest 并行运行测试，避免多个进程干扰调试。

配置 VS Code 启动文件

在项目根目录下创建 .vscode/launch.json，添加调试配置：

话袋AI笔记

话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑

195

查看详情

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Jest",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "cwd": "${workspaceFolder}",
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

登录后复制

这个配置会连接到运行在 9229 端口的 Node 调试器（Node 默认调试端口）。

开始调试步骤

打开终端，运行 npm run test:debug。Jest 会启动并暂停，等待调试器连接。
在 VS Code 中按 F5 或点击“运行和调试”侧边栏的“运行”按钮，启动 attach 配置。
当连接成功后，你之前在测试文件中设置的断点就会生效。
可以在测试代码中任意一行点击行号左侧设断点，执行到该行时会自动暂停。

小贴士

如果你使用的是 JavaScript 而非 TypeScript，可以去掉 -r ts-node/register。如果想只调试某个特定测试文件，可以在命令后加上文件路径：

npm run test:debug -- my-component.test.ts

登录后复制

也可以在 launch.json 中直接配置自动启动模式（使用 request: "launch"），但 attach 方式更稳定常见。

基本上就这些。只要 Jest 以可调试方式运行，并且 VS Code 成功连接，断点就能正常工作。不复杂但容易忽略的是 --runInBand 和正确的启动顺序。

以上就是在VS Code中为Jest测试用例设置断点的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

VSCode多工作区管理_复杂项目依赖关系处理策略 VSCode任务系统进阶_多工作区复杂构建流程编排 VSCode网页版部署_浏览器中运行VSCode实践 VSCode多工作区管理_大型项目协同开发策略 VSCode配置作用域_用户与工作区设置优先级