偵錯

TIP

在偵錯測試時，您可能需要使用以下選項：

• --test-timeout=0 以防止測試在斷點處停止時發生逾時
• --no-file-parallelism 以防止測試檔案並行執行

VS Code

在 VS Code 中偵錯測試的快速方法是使用 JavaScript 偵錯終端機。開啟一個新的 JavaScript 偵錯終端機 並直接執行 npm run test 或 vitest。此方法適用於在 Node.js 中執行的任何程式碼，因此對大多數 JavaScript 測試框架皆適用。

您也可以新增專用的啟動設定，以便在 VS Code 中偵錯測試檔案：

{
  // 如需更多資訊，請造訪：https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "偵錯目前測試檔案",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

然後在偵錯分頁中，請確保已選取「偵錯目前測試檔案」。接著您可以開啟要偵錯的測試檔案，然後按下 F5 鍵開始偵錯。

瀏覽器模式

若要偵錯 Vitest 瀏覽器模式，請在 CLI 中傳遞 --inspect 或 --inspect-brk 參數，或在您的 Vitest 設定中定義：

CLI

vitest --inspect-brk --browser --no-file-parallelism

vitest.config.js

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    inspectBrk: true,
    fileParallelism: false,
    browser: {
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

預設情況下，Vitest 將使用連接埠 9229 作為偵錯連接埠。您可以透過在 --inspect-brk 中傳遞值來覆寫它：

vitest --inspect-brk=127.0.0.1:3000 --browser --no-file-parallelism

使用以下 VS Code 複合啟動設定 來啟動 Vitest 並在瀏覽器中附加偵錯器：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "執行 Vitest 瀏覽器",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "附加至 Vitest 瀏覽器",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "偵錯 Vitest 瀏覽器",
      "configurations": ["附加至 Vitest 瀏覽器", "執行 Vitest 瀏覽器"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

建立一個 Vitest 執行設定。使用以下設定以偵錯模式執行所有測試：

設定	值
工作目錄	/path/to/your-project-root

然後在偵錯模式下執行此設定。IDE 將在編輯器中設定的 JavaScript/TypeScript 中斷點處停止。

Node Inspector，例如 Chrome DevTools

Vitest 也支援不透過 IDE 偵錯測試。然而，這要求測試不能並行執行。使用以下其中一個指令來啟動 Vitest。

# 在單一 Worker 中執行
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# 在單一子程序中執行
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# 在瀏覽器模式中執行
vitest --inspect-brk --browser --no-file-parallelism

如果您使用 Vitest 1.1 或更高版本，您也可以只提供 --no-file-parallelism 旗標：

# 如果 Pool 未知
vitest --inspect-brk --no-file-parallelism

一旦 Vitest 啟動，它將停止執行並等待您開啟可連接至 Node.js Inspector 的開發者工具。您可以使用 Chrome DevTools，方法是在瀏覽器中開啟 chrome://inspect。

在監看模式下，您可以使用 --poolOptions.threads.isolate false 選項，在測試重新執行期間保持偵錯器開啟。