你如何调试 Jest 测试？

Question

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

你如何调试 Jest 测试？

Answer 1

你不需要Chrome为玩笑测试。这就是使用 Jest 而不是其他测试运行器的全部意义。

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

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

1. 打开JavaScript Debug Terminal:

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

当您想缩小终端中--watch印刷机运行的文件数量p并输入一个模式时，该模式只是您要测试和点击的文件名的一部分[Enter]

要将其限制为文件中的单个测试 - 使用 f 将其聚焦，因此更改it(...)为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

然后就可以打开谷歌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

自 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 5

这是我在 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 6

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

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