コードカバレッジ
WebStorm を使うと、コードのうち テストでカバーされている部分も把握できます。 WebStorm は、この統計情報を専用の カバレッジ ツールウィンドウに表示し、エディターおよび プロジェクト ツールウィンドウ(Alt+1 )でカバー済みと未カバーの行を視覚的にマークします。
カバレッジ測定の結果は カバレッジスイートに保存されます。 既存のスイートのいずれかとマージすることもできます。 この場合、その行が少なくとも 1 回のテスト実行でカバーされていれば、そのラインはカバーされていると見なされます。
コードカバレッジの測定は、 Jest、 Mocha、 Karma、 Vitest で利用できます。
カバレッジでテストを実行する
をクリックし、リストから 
カバレッジスイート
特定の実行のカバレッジデータのコレクションは、 カバレッジスイートと呼ばれます。
WebStorm は、1 つ以上のカバレッジスイートの結果を同時に表示できます。 複数のスイートを選択した場合、IDE はこれらのスイートからマージされた結果を表示します。 つまり、行は、選択したスイートの少なくとも 1 つで実行された場合にカバーされていると見なされます。
対応するスイートファイルは、WebStorm のシステムディレクトリにあります：
%LOCALAPPDATA%\JetBrains\IntelliJIdea2025.1\coverage
~/.cache/JetBrains/IntelliJIdea2025.1/coverage
~/Library/Caches/JetBrains/IntelliJIdea2025.1/coverage
スイートの管理
メインメニューで、 Ctrl+Alt+F6 に移動します。
表示するカバレッジスイートの選択 メニューで:
チェックボックスを使用してアクティブなスイートを選択します。 アクティブなスイートは、IDE に現在表示されているカバレッジデータを定義します。
追加 を使用して、CI サーバーで生成されたファイルや、他のユーザーから送信されたファイルなどの外部スイートファイルをインポートします。リストからスイートを削除しますが、ファイルはストレージに保持するには、
削除 を使用します。
削除 を使用して、リストからスイートを削除し、ストレージからファイルを削除します。
カバレッジデータを読み取る
WebStorm は、次の場所にカバレッジ結果を表示します：
カバレッジ ツールウィンドウ
プロジェクト ツールウィンドウ
エディター
カバレッジツールウィンドウ
ツールウィンドウには、各フォルダーのカバーされた行の割合と、各ファイルのカバーされた行の割合が表示されます。
カバレッジ ツールウィンドウは、カバレッジを含む構成を実行した直後に表示され、カバレッジレポートを表示します。 カバレッジ ツールウィンドウを再度開くには、メインメニューで に移動するか、 Ctrl+Alt+F6 を押します。
コードカバレッジツールウィンドウのオプション
カバレッジ ツールウィンドウには次のオプションがあります。
項目 | 説明 |
|---|---|
| このオプションがオンの場合、WebStorm は選択したアイテムをエディターで自動的に開きます。 それ以外の場合は、項目をダブルクリックして開く必要があります。 |
| このオプションがオンの場合、WebStorm はエディターで開いたファイルをツールウィンドウで自動的に表示します。 |
| ディスクからカバレッジスイートをインポートします。 |
| カバレッジ結果をフィルタリングします。 コミットされていない変更のあるファイルのみを表示して最近の更新に焦点を当てたり、テストで完全にカバーされているファイルを非表示にしたりすることができます。  |
エディターでのカバレッジ結果
ファイルをエディターで開くと、その行はカバレッジステータスに応じてガター内でハイライトされます。
緑 – 実行された行
赤 – 実行されていない行
ラインがヒットした回数を確認するには、ガターのカラーインジケーターをクリックします。 開くポップアップには、キャレットの行の統計が表示されます。
プロジェクトツールウィンドウでのカバレッジ結果
プロジェクト は、ファイルとディレクトリのカバーされた行の割合を示します。
カバレッジデータを非表示にする
次のいずれかを実行します：
カバレッジ ツールウィンドウ () のカバレッジ統計のタブを閉じます。
ガター内のカバレッジハイライトをクリックし、 カバレッジを非表示 を選択します。
コードカバレッジを構成する
Ctrl+Alt+S を押して設定を開き、 を選択します。
収集されたカバレッジデータの処理方法を定義します。
コードカバレッジ付きの新しい実行構成を起動するたびに コードカバレッジ ダイアログを表示するには、 エディターにカバレッジを適用する前にオプションを表示する を選択します。
新しいコードカバレッジ結果を破棄するには、 収集されたカバレッジを適用しない を選択してください。
アクティブなスイートを破棄して、コードカバレッジ付きの新しい実行構成を起動するたびに新しいスイートを使用するには、 アクティブなスイートを新しいものに置き換える を選択します。
コードカバレッジを使用して新しい実行構成を起動するたびに新しいコードカバレッジスイートをアクティブスイートに追加するには、 アクティブなスイートに追加 を選択します。
アプリケーションまたはテストがカバレッジで実行されたときの カバレッジ ツールウィンドウの動作を定義します。
カバレッジ ツールウィンドウを自動的に開くには、 カバレッジビューをアクティブにする チェックボックスを選択します。
カバレッジ ツールウィンドウを手動で開くには、 カバレッジビューをアクティブにする チェックボックスをオフにします。
カバレッジのハイライトの色を変更する
Ctrl+Alt+S を押して設定を開き、 を選択します。
または、ガターのカバレッジ表示線をクリックすると開くポップアップで
をクリックします。コンポーネント一覧で カバレッジ行 ノードを展開し、カバレッジのタイプを選択します。例えば、 全部、 一部 、または カバレッジなし などです。
フォアグラウンド フィールドをクリックして、 色を選択する ダイアログを開きます。
色を選択し、変更を適用して、ダイアログを閉じます。
