Vitest

1. Node.js をダウンロードしてインストールします。

2. JavaScript and TypeScript および Vite に必要なプラグインが 設定 | プラグイン ページ、タブ インストール済み で有効化されていることを確認してください。 詳細については、 プラグイン管理を参照してください。

• コマンドライン シェルまたは組み込みの ターミナルエミュレータ （Alt+F12 ）で、次を入力します：

  npm install --save-dev vitest

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

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

  

  実行 ツールウィンドウでテストの実行結果を確認します。 失敗したテストについては、エラーが発生した場所と原因に関する情報が表示されます。

  

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

  

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

  

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

  

Vitest 実行構成を作成する

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

2. 使用する Node.js ランタイムを指定します。

   プロジェクト エイリアスを選択すると、CLion は ノードランタイム フィールドの JavaScript ランタイムページからプロジェクトデフォルトのインタープリターを自動的に使用します。 ほとんどの場合、CLion はプロジェクトのデフォルトランタイムを検出し、フィールドに自動的に入力します。

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

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

   変数の定義は、 環境変数 フィールドにセミコロン (;) を区切りとして表示されます。例えば：

   • NODE_PATH

     モジュール解決時に検索する追加ディレクトリのリストです。 リスト内のディレクトリを区切るには、macOS または Linux ではコロン (:) を、Windows ではセミコロン (;) を使用してください。

   • NODE_MODULE_CONTEXTS

     独自のグローバルコンテキストでモジュールをロードするには 1 に設定します。

   • NODE_DISABLE_COLORS

     REPL の色を無効化するには 1 に設定します。

   

   または、フィールドの右側にある 閲覧 をクリックし、表示される 環境変数 ダイアログで変数のリストを設定します：

   • 、 、 、 ボタンを使用して、カスタム変数のリストを管理します。

   • ダイアログには、使用可能なシステム環境変数のリストも表示されます。 現在の構成でシステム環境変数を使用しない場合は、 システム環境変数を含める チェックボックスをオフにしてください。

   • 準備ができたら OK をクリックします。

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

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

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

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

7. オプション:

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

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

8. オプション:

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

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

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

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

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

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

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

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

   

失敗したテストを再実行

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

  

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

  

  あるいは:

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