[React] Vitest テストカバレッジを導入する

概要

テストを書いていると「今のテストはコードのどれくらいの部分をカバーしているのか？」という疑問が自然と生まれます。Vitest を使っているなら、テストカバレッジを通じてこの疑問に対する答えを得ることができます。

この記事では、Vitest ベースの React プロジェクトにテストカバレッジ測定環境を導入した経験を共有します。

Vitest 導入の背景が気になる方は、Jest プロジェクトに Vitest を導入する - View テスト分離戦略を先に読むことをおすすめします。

テストカバレッジとは

テストカバレッジ（Test Coverage）は、テストがソースコードをどれだけ実行しているかを数値で表した指標です。主要な指標は以下の通りです。

指標	説明
Statements	全ステートメントのうち実行されたステートメントの割合
Branches	条件分岐（if/else、switch など）の各分岐が実行された割合
Functions	定義された関数のうち呼び出された関数の割合
Lines	全コード行のうち実行された行の割合

カバレッジの数値が高いからといって必ずしも良いテストとは限りませんが、テストが不足している領域を発見するのに有用な指標です。

環境設定

Vitest でテストカバレッジを測定するためには、以下の設定が必要です。

パッケージインストール

Vitest のカバレッジ測定には @vitest/coverage-v8 パッケージを使用します。V8 エンジンの内蔵カバレッジ機能を活用するため、別途のコード変換（instrumentation）なしで正確なカバレッジを測定できます。

React プロジェクトのディレクトリでパッケージをインストールします。

yarn add -D @vitest/coverage-v8

スクリプト追加

React プロジェクトの package.json にカバレッジ実行スクリプトを追加します。

{
  "scripts": {
    "test:view": "TZ=Asia/Tokyo vitest",
    "test:view:ci": "TZ=Asia/Tokyo vitest run",
    "test:view:coverage": "TZ=Asia/Tokyo vitest run --coverage"
  }
}

vitest run --coverage コマンドは Vitest を watch モードなしで一度実行しながらカバレッジデータを収集します。

.gitignore 設定

カバレッジレポートはローカルでのみ確認すれば良いため、生成される coverage/ ディレクトリを .gitignore に追加します。

coverage/

カバレッジの実行と確認

設定が完了したら、以下のコマンドでカバレッジを生成できます。

yarn test:view:coverage

実行が完了すると ./coverage/index.html ファイルが生成されます。このファイルをブラウザ（または VSCode の Live Server）で開くと、視覚的なカバレッジレポートを確認できます。

カバレッジレポートの読み方

以下は実際のカバレッジレポートの例です。

カバレッジレポートの例

このレポートから確認できる主要な情報は以下の通りです。

全体カバレッジ: Statements 80.39%、Branches 50%、Functions 75%、Lines 79.16%
コンポーネント別詳細カバレッジ: 各コンポーネントファイルのカバレッジを個別に確認可能
色で一目で把握: 緑色はカバレッジが高い領域、黄色/赤色は改善が必要な領域

例えば上記のレポートでは、TargetDeviceAdditionDialog は Statements 55%、Functions 42.85% で他のコンポーネントに比べてカバレッジが低いことが確認できます。このようにテストカバレッジを活用すると、テスト強化が必要なコンポーネントを簡単に特定できます。

一方、DeviceDeletionButton、DeviceNameLabel などは 100% カバレッジを達成しており、十分なテストが作成されていることがわかります。