你如何調試 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！