はじめに

Vitestは、JavaScriptフロントエンド開発のための高速なテストフレームワークです。学んだ内容をまとめていきます。

Vitestの特徴

HMR（ホットモジュール交換)を使用しているため、開発効率を上げることができます。
HMRは、ソースコードの変更を検出し、関連するテストだけを即座に実行できるため、変更による影響をすぐに把握できます。
開発しながら、テストも一緒に書いている場合に、とても便利ですね。

VitestはJestと互換性があり、Jestの影響を受けています。
既存のプロジェクトでも採用しやすいです。

Vitestは、高速なビルドツールであるViteをベースにしています。
ViteはJavaScriptの依存関係を事前にバンドルし、実行時の処理を最小限に抑えて高速化を図っています。
ちなみに、Viteを使っていないプロジェクトでも、Vitestは使用できます。

まずは、vitestをインストール

インストールしたら、vite.config.tsファイルを以下のように編集する。

VSCodeを使用している人は、以下の「Vitest」という拡張機能を入れれば便利です。
スクリーンショット 2024-03-14 22.57.22.png

それでは、簡単なテストを書いていきます。
「sum.ts」ファイルと「sum.test.ts」ファイルを書いていきます。
Jestと同様に、[ファイル名].test.tsのようなファイル名にすれば、自動的にテストファイルとみなしてくれます。

こちらをテストしてきましょう。
VSCodeのサイドバーにある「テスト」ボタンをクリックします。

スクリーンショット 2024-03-20 10.04.27.png

すると、作成したテストケースが一覧で表示されており、テストしたい項目を選ぶことができます。
スクリーンショット 2024-03-20 10.06.01.png

テストを実行してみましょう。
成功すると、以下のように表示されます。
スクリーンショット 2024-03-20 10.07.40.png

コードを以下のようにして、テストが失敗するようにしてみましょう。

テスト実行してみましょう。
失敗すると、エラーの原因などが赤く表示されます。

スクリーンショット 2024-03-20 10.09.21.png

他にも色々な記事を書いているので、よければ読んでいってください、、、