はじめに
この記事では、VSCode プラグイン Vitest の基本的な利用方法を確認します。
開発環境
開発環境は以下の通りです。
- Windows 11
- VSCode 1.90.2
- Extension: Vitest 0.12.3
- Vitest 1.6.0
- @testing-library/jest-dom 6.4.2
- @testing-library/react 14.3.0
- @testing-library/user-event 14.5.2
- TypeScript 5.4.2
- React 18.3.1
- Vite 5.2.11
- Node.js 20.13.1
- npm 10.8.1
プラグインの利用要件は、以下の通りです。1
- Visual Studio Code version >= 1.77.0
- Vitest version >= v1.4.0
- Node.js version >= 18.0.0 (follows Vitest)
- Coverage requires Visual Studio Code >= 1.88.0
プラグインのインストール
サイドバーの Extensions で "Vitest" と検索すると、表示されるので、そこからインストールします。
機能の確認
プラグインがインストールできたので、どのような機能があるか確認しています。
Testing View とテストファイル2つの箇所からテストを管理できます。
Testing View
サイドバーの Testing アイコンをクリックすると、Testing View が表示されます。
Testing View 上部のタブからは、全テスト共通で操作ができます。以下のように全テストを実行することもできます。
今回の環境では、Playwright と Vitest で分けてテスト実行するようにしているので、各テスト内で一括実行されるようになっています。
ファイルごとやケースごとのテスト実行もできます。
単なるテスト実行だけでなく、カバレッジの計測も可能です。
ただし、カバレッジを利用するためには、プラグインのインストール及びテスト設定をしておく必要があります。
また、Testing View からテストファイルへ移動することもできます。
テストファイル
テストファイルでも Testing View と同じように一括でのテスト実行、ケースごとのテスト実行、カバレッジの計測などができます。
