デバッグ

TIP

テストのデバッグ時には、以下のオプションが役立ちます。

• --test-timeout=0 ブレークポイントで停止している間のテストのタイムアウトを防ぎます。
• --no-file-parallelism テストファイルが並行して実行されるのを防ぎます。

VS Code

VS Codeでテストをデバッグする最も簡単な方法は、JavaScript Debug Terminalを使用することです。新しいJavaScript Debug Terminalを開き、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

Vitestを起動し、ブラウザのデバッガに接続するには、以下のVS Code複合設定を使用します。

{
  "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はエディタに設定したJS/TSのブレークポイントで停止します。

Node Inspector、例：Chrome DevTools

VitestではIDEを使わずにテストをデバッグすることも可能です。ただし、この場合、テストが並列実行されないようにする必要があります。Vitestを起動するには、以下のいずれかのコマンドを使用します。

# 単一のワーカーで実行する場合
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フラグを指定するだけでも十分です。

# プールが不明な場合
vitest --inspect-brk --no-file-parallelism

Vitestが起動すると、実行を一時停止し、Node.jsインスペクターに接続可能な開発者ツールの起動を待ちます。これには、ブラウザでchrome://inspectを開くことでChrome DevToolsを利用できます。

ウォッチモードでは、--poolOptions.threads.isolate falseオプションを使用することで、テストの再実行時もデバッガを維持できます。