実験的なユニットテストシステム

Angular CLIは、テストランナーとしてVitestを使用できる実験的なユニットテストシステムを提供します。

依存関係のインストール

新しいビルダーが動作するために、いくつかのパッケージが必要です。新しいパッケージをインストールするには、次のコマンドを実行します。

npm install vitest jsdom --save-dev

ワークスペース内の他のプロジェクトがKarmaを使用していない場合は、次のコマンドを実行して対応するパッケージをアンインストールします。

npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter --save-dev

テストのセットアップ

Angular CLIは新しいプロジェクト内にテストシステムを含んでいますが、使用する前に設定が必要です。

CLIで作成するプロジェクトは、デフォルトでkarmaテストシステムを使用するように設定されています。 実験的なユニットテストシステムに変更するには、testターゲットを次のように更新します。

"test": {  "builder": "@angular/build:unit-test",  "options": {    "tsConfig": "tsconfig.spec.json",    "runner": "vitest",    "buildTarget": "::development"  }}

buildTargetは、開発サーバーで利用可能なオプションと同様に動作します。 buildターゲットは、テストのビルドオプションを設定します。 プロジェクトでdevelopmentビルド設定が不足している場合や、テスト用に異なるオプションが必要な場合は、 testingまたは同様の名前のビルド設定を作成して使用できます。

アプリケーションのテストを実行するには、これまでと同様にng testCLIコマンドを実行するだけです。

ng test

ng testコマンドは、アプリケーションをウォッチモードでビルドし、設定されたランナーを起動します。

コンソール出力は以下のようになります。

✓ spec-app-app.spec.js (2 tests) 31ms   ✓ App > should create the app 22ms   ✓ App > should render title 8ms Test Files  1 passed (1)      Tests  2 passed (2)   Start at  14:24:15   Duration  1.16s (transform 628ms, setup 703ms, collect 64ms, tests 31ms, environment 188ms, prepare 33ms)

ウォッチモードは、対話型ターミナルを使用している場合、およびCIで実行していない場合に、デフォルトで有効になります。

設定

Angular CLIがVitest設定を自動的に処理します。angular.jsonファイルで指定されたオプションに基づいて、完全な設定をメモリ内で構築します。 基盤となるテストランナー設定を直接カスタマイズすることは現在サポートされていません。

バグ報告

課題と機能リクエストはGitHubで報告してください。

チームが課題に対処できるよう、可能な場合は最小限の再現手順を提供してください。