コードカバレッジ
WebStorm を使用すると、コードのどの程度がテストでカバーされている(英語)かを監視することもできます。WebStorm は、専用のカバレッジツールウィンドウにこの統計を表示し、カバーされた行とカバーされていない行をエディターとプロジェクトツールウィンドウ Alt+1 に視覚的にマークします。
カバレッジ測定の結果はカバレッジスイートに保存されます。既存のスイートのいずれかとマージすることもできます。この場合、その行が少なくとも 1 回のテスト実行でカバーされていれば、そのラインはカバーされていると見なされます。
コードカバレッジの測定は、Jest、Mocha、Karma、Vitest で利用できます。
カバレッジでテストを実行する
をクリックし、リストから
カバレッジスイート
特定の実行のカバレッジデータのコレクションは、カバレッジスイートと呼ばれます。
WebStorm は、1 つ以上のカバレッジスイートの結果を一度に表示できます。複数のスイートを選択した場合、IDE はこれらのスイートからマージされた結果を表示します。つまり、行は、選択したスイートの少なくとも 1 つで実行された場合にカバーされていると見なされます。
対応するスイートファイルは、WebStorm のシステムディレクトリにあります。
%LOCALAPPDATA%\JetBrains\WebStorm2025.3\coverage
~/.cache/JetBrains/WebStorm2025.3/coverage
~/Library/Caches/JetBrains/WebStorm2025.3/coverage
スイートの管理
メインメニューで、 Ctrl+Alt+F6 に移動します。
表示するカバレッジスイートの選択メニューで:
チェックボックスを使用してアクティブなスイートを選択します。アクティブなスイートは、IDE に現在表示されているカバレッジデータを定義します。
追加を使用して、CI サーバーで生成されたファイルや、他のユーザーから送信されたファイルなどの外部スイートファイルをインポートします。リストからスイートを削除しますが、ファイルはストレージに保持するには、
除去を使用します。
削除を使用して、リストからスイートを削除し、ストレージからファイルを削除します。
カバレッジデータを読み取る
WebStorm は、次のカバレッジ結果を表示します:
カバレッジツールウィンドウ
プロジェクトツールウィンドウ
エディター
カバレッジツールウィンドウ
ツールウィンドウには、各フォルダーのカバーされた行の割合と、各ファイルのカバーされた行の割合が表示されます。
カバレッジツールウィンドウは、カバレッジを含む構成を実行した直後に表示され、カバレッジレポートを表示します。カバレッジツールウィンドウを再度開くには、メインメニューでに移動するか、Ctrl+Alt+F6 を押します。
コードカバレッジツールウィンドウのオプション
カバレッジツールウィンドウには次のオプションがあります。
項目 | 説明 |
|---|---|
| このオプションがオンの場合、WebStorm は選択したアイテムをエディターで自動的に開きます。それ以外の場合は、アイテムをダブルクリックして開く必要があります。 |
| このオプションがオンの場合、WebStorm は、エディターで開いたファイルをツールウィンドウで自動的に検索します。 |
| ディスクからカバレッジスイートをインポートします。 |
| カバレッジ結果をフィルタリングします。コミットされていない変更のあるファイルのみを表示して最近の更新に焦点を当てたり、テストで完全にカバーされているファイルを非表示にしたりすることができます。  |
エディターでのカバレッジ結果
ファイルをエディターで開くと、その行はカバレッジステータスに応じてガター内でハイライトされます。
緑 – 実行された行 
赤 – 実行されていない行
ラインがヒットした回数を確認するには、ガターのカラーインジケーターをクリックします。開くポップアップには、キャレットの行の統計が表示されます。
プロジェクトツールウィンドウでのカバレッジ結果
プロジェクトは、ファイルとディレクトリのカバーされた行の割合を示します。
カバレッジデータを非表示にする
以下のいずれか 1 つを実行します:
カバレッジツールウィンドウ () のカバレッジ統計のタブを閉じます。
ガター内のカバレッジハイライトをクリックし、カバレッジを非表示を選択します。
コードカバレッジを構成する
Ctrl+Alt+S を押して設定を開き、を選択します。
収集されたカバレッジデータの処理方法を定義します。
コードカバレッジ付きの新しい実行構成を起動するたびにコードカバレッジダイアログを表示するには、エディターにカバレッジを適用する前にオプションを表示するを選択します。
新しいコードカバレッジ結果を破棄するには、収集されたカバレッジを適用しないを選択してください。
アクティブなスイートを破棄して、コードカバレッジ付きの新しい実行構成を起動するたびに新しいスイートを使用するには、アクティブなスイートを新しいものに置き換えるを選択します。
コードカバレッジを使用して新しい実行構成を起動するたびに新しいコードカバレッジスイートをアクティブスイートに追加するには、アクティブなスイートに追加を選択します。
アプリケーションまたはテストがカバレッジで実行されたときのカバレッジツールウィンドウの動作を定義します。
カバレッジツールウィンドウを自動的に開くには、カバレッジビューをアクティブにするチェックボックスを選択します。
カバレッジツールウィンドウを手動で開くには、カバレッジビューをアクティブにするチェックボックスをオフにします。
カバレッジのハイライトの色を変更する
Ctrl+Alt+S を押して設定を開き、を選択します。
または、ガターのカバレッジ表示線をクリックすると開くポップアップで
をクリックします。コンポーネントのリストで、カバレッジ行ノードを展開し、カバレッジのタイプを選択します（例: 全部、一部または Uncovered）。
フォアグラウンドフィールドをクリックして、色を選択するダイアログを開きます。
色を選択し、変更を適用して、ダイアログを閉じます。
関連ページ：
Jest
Jest は、特にクライアント側の JavaScript アプリケーションおよび React アプリケーション用のテストプラットフォームです。プラットフォームの詳細については、Jest の公式 Web サイトを参照してください。WebStorm の Jest でテストを実行し、デバッグすることができます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターでテストの横に表示され、すぐに実行したりデバッグすることができます。始める前に：お使いのコ...
Mocha
Mocha は、非同期テストシナリオの実行に特に役立つ JavaScript テストフレームワークです。WebStorm の外部から Mocha テストを実行し、ツリービューに配置されたテスト結果を調べ、そこからテストソースに簡単に移動できます。エディターのテストの横に、WebStorm はテストのステータスを表示し、テストをすばやく実行またはデバッグするオプションを提供します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定で Node.js...
Karma
Karma は、クライアント側 JavaScript をテストするためのツールです。Karma は、実際のブラウザーで実行されているアプリケーションに対してテストを実行し、テスト結果の正確さと信頼性を保証します。WebStorm は Karma と統合されているため、IDE 内からテストの実行、デバッグ、カバレッジを監視できます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの横に表示され、すぐに実行またはデバッグするオプショ...
Vitest
WebStorm は、Vite-native 単体テストフレームワークである Vitest と統合されます。実行、デバッグ、スナップショットテストの実行、およびエディターと実行 / デバッグ構成の両方からのテストカバレッジの測定を行うことができます。失敗したテストを再実行するか、監視モードをオンにすることができます。このモードでテストセッションを起動すると、WebStorm はプロジェクトソースコードの変更を監視します。テストまたはそのサブジェクトに変更が加えられるとすぐに、WebStorm は影響...
テストとテスト対象間を移動する
WebStorm では、テストとテスト対象の間をすばやく移動できます。一般的なテスト手順の詳細については、「テストの実行」を参照してください。言語およびフレームワーク固有のガイドラインについては、JavaScript のテスト、Node.js のテスト、言語およびフレームワークを参照してください。テストからテスト対象へ移動エディターでテストファイルを開きます。エディターのコンテキストメニューからを選択するか、を押します。現在のテストファイルのテスト対象がエディターの専用タブで開き、フォーカスが...
実行 / デバッグ構成
WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...