你如何调试 Jest 测试？

Question

我找不到任何有关调试用 Jest 编写的单元测试的信息。

你如何调试 Jest 测试？

Answer 1

您不需要Chrome进行Jest测试。

我找到的最简单的解决方案是使用VS Code JavaScript Debug Terminal 。

它可以与 Typescript 和 Nrvl.Nx 开箱即用的工作空间一起使用。

1. 打开命令面板并启动Debug: JavaScript Debug Terminal ：

2. 在该终端中以Watch 模式npm test --watch 。
3. 在文件中设置断点。
4. 对要调试和保存的文件进行任何更改。
5. watch将对修改的文件运行 Jest 测试。

当您想缩小 --watch 运行的文件数量时，在终端中按p并输入一个模式，这只是您要测试的文件名的一部分，然后按 [Enter]

要将其限制为文件中的单个测试 - 用 f 聚焦它，因此将它（...）更改为 fit（...）

Answer 2

您可以使用 Chrome DevTools 来调试 Jest 测试。

首先，在您的项目中启动 Node 调试器：

node --inspect-brk <path to jest.js> --runInBand <path to your test file>

例子：

• 如果您在本地安装 Jest（Linux 示例）：

  node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand mymodule/test.js

• 如果您全局安装 Jest（Windows 示例）：

  node --inspect-brk "C:\\Program Files\\nodejs\\node_modules\\jest\\bin\\jest.js" --runInBand mymodule\\test.js

然后，您可以打开 Google Chrome 浏览器，在地址栏中输入：

chrome://inspect

现在单击“远程目标”下的检查链接以打开 Chrome DevTools。

请注意，您可能需要将源代码文件夹添加到 chrome-devtools 中的工作区，以便能够设置断点。

现在您可以按 F8 开始调试。

[仅供参考] ：

• 我的节点版本：v10.11.0
• 我的笑话版本：23.6.0
• 我的谷歌浏览器版本：71.0.3578.98

---

[更新]关于在 chrome-devtools 中将源代码文件夹添加到工作区的步骤（根据 Sam 的要求），如下所示：

然后你可以打开你的脚本文件并设置断点：

您可以在我的 GitHub 存储库中找到简单的演示项目。

Answer 3

我写了一篇关于在终端中调试 Jest 测试的 7 种方法的博文。 这是最快的方法。

您可以安装ndb ，这是一种改进的 Node.js 调试体验，由 Chrome DevTools 启用，使用

npm install -g ndb

然后你可以运行：

ndb npm run test

这将为您打开 DevTools 并运行测试。

或者您可以只输入一个命令：

npx ndb npm run test

你可以走了。 但是请查看博客文章，其中详细介绍了调试 Jest 测试的不同方法。

Answer 4

这是我在 VSCode 中调试 Jest 的基本配置，添加到 settings.json 中的启动配置

"launch" : {
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
          "-i"
      ],
       "skipFiles": [
        "<node_internals>/**/*.js", "node_modules",
      ]
    }
  ],
},

Answer 5

截至 2021 年，请查看 Jest 文档中的 VS Code 中的调试。 将以下configurations添加到您的.vscode/launch.json文件中。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
  ]
}

Answer 6

对于任何寻求答案的人，您可以使用 node-inspector 调试 jest。 然而，这是一个非常缓慢的过程（调试单个测试需要 2-5 分钟），并且在实际使用中并不是很有用。

我还没有找到更好的调试 Jest 的方法，但是我看到很多人做额外的工作来让 jasmine 或 mocha 与 react 组件一起工作。 因此，在节点检查器实际可用之前，这可能是一个更可行的选择。

Answer 7

跑

node --debug-brk node_modules/.bin/jest

在您的项目目录中。 它应该启动node进程暂停调试器的侦听（通常在端口 5858）。 Visual Studio Code是一个很好的 node.js 图形调试器示例，可用于连接到侦听节点进程。

Answer 8

@Yuci 的回答对我来说是完美的。

如果您在本地 Docker 容器中使用 jest，我只是对其进行精确化。 您需要精确--inspect-brk=0.0.0.0:9229

node --inspect-brk=0.0.0.0:9229 <path to jest.js> --runInBand <path to your test file>

Answer 9

仅当只有一个项目时，添加 jest 配置才有效。 但是，如果它自己的文件夹中有多个项目（即 rootfolder/project1、rootfolder/project2），则在测试文件或被测文件中运行带有断点的“jest --watchAll --runInBand --coverage”会很好选项

Answer 10

这是您可以添加到项目中以使用debugger; 在您的 Jest 测试文件中：

1. 将此脚本添加到package.json ：

  "test:debug": "open -a \"Google Chrome\" chrome://inspect && node --nolazy --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --colors --verbose",

2. 在您的项目中运行脚本：

yarn test:debug insert/path/to/file

3. 现在你可以使用debugger; 在您的测试文件中触发 Google Chrome 中的代码行断点！ 🐛 🔫

该脚本有两个部分。 首先，它打开 Chrome - 到： chrome://inspect - 然后它会启动一个 Node 进程（我们可以在其中使用调试器），在特定的测试文件上运行一个 jest 文件（来自节点模块）。 因此，您必须在项目依赖项中安装 Jest！