⚡

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

に公開
Test
debug
Vitest
tech

まず初めに、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
  1. 下記のようにデバッグを起動させることができます。

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"
    }
  ]
}

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

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

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

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

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

4. 注意点

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

Discussion