Vitest

• お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

• 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

  npm install --save-dev vitest

エディターから単一のテストを実行またはデバッグする

• ガターで または をクリックし、リストから実行 <テスト名> を選択します。

  

  ガターのテストステータスアイコン および により、エディターでテストが成功したか失敗したかを確認することもできます。

• テストをデバッグするには、テスト内にブレークポイントを設定し、ガターで または をクリックし、リストからデバッグ <テスト名> を選択します。

  

  デバッグツールウィンドウで、中断されたテストを調べ、ステップ実行します。

  

Vitest 実行構成を作成する

1. 実行 / デバッグ構成ダイアログ (メインメニューの実行 | 実行構成の編集 ) を開き、左側のペインで をクリックし、リストから Vitest を選択します。「実行 / デバッグ構成: Vitest」ダイアログが開きます。

2. 使用する Node.js インタープリターを指定します。

   プロジェクトエイリアスを選択すると、WebStorm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、WebStorm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

   別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 をクリックして新しいインタープリターを構成することもできます。

   詳細については、「リモート Node.js インタープリターの構成」、「ローカル Node.js インタープリターの構成」、「Linux の Windows サブシステムで Node.js を使用する」を参照してください。

   必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーターと環境変数(英語)を指定します。

3. vitest パッケージの場所を指定します。

4. アプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにはプロジェクトのルートフォルダーが表示されます。この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。

5. 実行するテストを指定します。これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。

6. デフォルトでは、vite.config.ts が使用されます。vite.config.ts が存在しない場合、またはカスタム構成を使用する場合は、使用する vitest.config.ts を指定します。詳細については、Vitest オフィシャル Web サイト(英語)を参照してください。

7. オプション:

   それらまたは関連するソースファイルの変更時に自動的に再実行されるテストを構成します。これを行うには、Vitest オプションフィールドに --watch フラグを追加します。

   他の Vitest オプションを追加することもできます。詳細については、Vitest オフィシャル Web サイト(英語)を参照してください。

8. オプション:

   Node オプションフィールドに、Node.js 実行可能ファイルに渡される Node.js 固有のコマンドラインオプションを入力します。許容されるオプションは次のとおりです。

   • 実行中に CoffeeScript ファイルをオンザフライで JavaScript にコンパイルするには、--require coffeescript/register を使用します。

     このモードでは、coffeescript パッケージの一部である register.js ファイルがプロジェクト内に配置されている必要があります。CoffeeScript コンパイラーをインストールするの説明に従って、coffeescript パッケージがローカルにインストールされていることを確認してください。

   • Chrome デバッグプロトコル(英語)サポートには --inspect または --inspect-brk パラメーターを使用します。

実行構成を介してテストを実行する

1. 構成のリストから Vitest 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。

   

2. 実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。

   

テストをデバッグするには、必要に応じてブレークポイントを設定し、実行 / デバッグ構成を選択して、 をクリックします。

失敗したテストの再実行

• テスト結果ツールバーの をクリックします。WebStorm は、前回のセッション中に失敗したすべてのテストを実行します。

  

• 特定の失敗したテストを再実行するには、そのコンテキストメニューで実行 <テスト名> を選択します。

詳細は、テストの再実行を参照してください。

更新されたテストを自動的に再実行する (--watch モード)

1. Vitest 実行 / デバッグ構成を開くか、上記のように新しい構成を作成します。

2. Vitest オプションフィールドに --watch と入力します。自動生成されたすべてのテスト構成では、--watch オプションがすでに指定されています。

3. 実行 / デバッグ構成を起動します。一部のテストが失敗した場合、テストセッションを停止することなく、それらのテストまたは関連するテストサブジェクトを更新できます。変更が保存されるとすぐに、WebStorm はそれらを検出し、影響を受けるテストを再実行します。

   以下の例では、vue.test.ts の 29 行でのテストが失敗します。--watch オプションを使用すると、vue.test.ts で '4 x 4 = 18' を '4 x 4 = 16' に置き換え、変更を Ctrl+S で保存するか、フォーカスを WebStorm から移動した後で、テストが再実行されます。

   

Vitest のコードカバレッジを有効にする

@vitest/ カバレッジ v8(英語) または istanbul(英語) をインストールします。これを行うには、組み込みのターミナル Alt+F12 を開き、次のいずれかを入力します。

• npm install --save-dev @vitest/coverage-v8

• npm install --save-dev @vitest/coverage-istanbul .

Vitest 公式 Web サイトでカバレッジ(英語)の詳細を参照してください。

カバレッジでテストを実行する

1. エディターからのカバレッジで特定のスイートまたはテストを実行します。ガターで または をクリックし、リストからカバレッジで <test_name> を実行するを選択します。

   

   あるいは:

   上記の説明に従って、Vitest 実行 / デバッグ構成を作成します。メインツールバーのリストから Vitest 実行 / デバッグ構成を選択し、リストの右側にある をクリックします。

2. カバレッジツールウィンドウでコードカバレッジを監視します。このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。レポートから、ファイルに移動して、どの行が覆われていたか（緑色にマーキングされているか、どの行が覆われていないか）、赤色に表示されているかを確認できます。