VSCode で Vitest を使用したデバッグの最小設定方法

まず初めに、Vitest デバッグのドキュメント（英語）はコチラです。
ドキュメントを参照して設定が可能であれば、この記事を読む必要はありません。

1. まずは Vitest を動作させる

1-1. 動作環境

• Windows10
• node v20.12.1

1-2. ライブラリをインストール

command

$ npm i -D vitest

1-3. コードを追加する

sum.jsを作成し、以下の関数を実装します。

sum.js

export function sum(a, b) {
  return a + b
}

sum.jsと同じ階層にsum.test.jsを作成し、以下のテストコードを記述します。

sum.test.js

import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

上記のファイルを用意した後、以下のコマンドを実行します。

command

$ npx vitest

テストが通れば設定は完了です。

2. デバッグを行う

Vitest でのデバッグには主に以下の2つの方法があります。

1. JavaScript Debug Terminal を利用してデバッグする方法
2. F5 を押下して意図的にデバッグする方法（launch.json作成する必要あり）

2-1. JavaScript Debug Terminal のデバッグ方法

1. VSCodeでブレークポイントを設定します。
2. コマンドパレットを開き、Debug: JavaScript Debug Terminalを選択します。
   
3. JavaScript Debug Terminal で下記のコマンドを入力します。

JavaScript Debug Terminal

$ npx vitest

4. 下記のようにデバッグを起動させることができます。
   

2-2. launch.json からデバッグする

1. VSCodeでブレークポイントを設定します。
2. VSCodeの左のタブのデバッグボタンを押して、launch.jsonを作成します。
   
   launch.jsonには下記を入力します。

.vscode/launch.json

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current Test File",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

3. sum.test.jsを選択した上で、起動ボタン（▶）をクリックします。（またはキーF5でも可能）
   このとき、launch.jsonに追加したname（Debug Current Test File）を選択していることを確認してください。
   

4. 下記のようにデバッグを起動させることができます。
   

3. テスト対象ファイルも確認可能

Vitest でテストファイルをデバッグする際は、テスト対象のsum.jsも同時に確認できます。

sum.test.js のデバッグから、sum.js のコードを確認している画像

4. 注意点

• パスに日本語が含まれている場合、動作しない可能性があります。（私の環境ではnode v18.15.0で日本語パスが含まれていても動作しましたが、それ以降では動作しないようでした）