如何调试Jest Tests？

Question

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

如何调试Jest Tests？

Answer 1

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

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

它开箱即用，适用于Typescript和Nrvl.Nx工作空间。

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

​

​

在npm test --watch.

• Set文件断点的监视模式下，save.

• watch

1. 将在该终端中运行测试。
2. 对要调试的文件进行任何更改，并且Jest将对修改后的文件运行Jest测试。

如果要缩小--watch运行的文件数，请在终端中按p键并输入一个模式，该模式只是要测试的文件名的一部分，然后按enter键

要将其限制为文件中的单个测试-使用f将其作为焦点，因此更改它(...)为了适应(...)

Answer 2

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

First，在项目中启动节点调试器：

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 (Window示例)：

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

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

chrome://inspect

现在点击“远程目标”下的inspect链接，打开Chrome DevTools。

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

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

仅供参考

• 我的节点版本: v10.11.0
• My Jest版本:23.6.0
• 我的谷歌浏览器版本:v10.11.0

更新关于将源代码文件夹添加到chrome-devtools中的工作区的步骤(由Sam询问)，如下所示：

​

​

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

​

​

您可以找到简单的demo project on my GitHub repo。

Answer 3

这是我在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",
      ]
    }
  ],
},