この記事は「Angular × Vite ユニットテスト入門｜Vitestで始めるテスト完全ガイド」シリーズの一部です。
AngularのVitestとangular.jsonの設定完全ガイド｜テスト環境の仕組みを解説
Angularでは、ユニットテスト環境としてVitestが標準で利用されるようになり、従来のKarma構成から大きく進化しました。
しかし実際には、
- angular.jsonの設定がよく分からない
- Vitestの設定はどこで管理されているのか不明
- カスタマイズ方法が分かりにくい
と感じる人も多いです。
本記事では、Angular公式ドキュメントをベースに、Vitestとangular.jsonの関係と設定方法を初心者向けにわかりやすく解説します。
この記事でわかること
- Vitestとangular.jsonの役割
- angular.jsonでできる設定
- カスタマイズ方法
Vitestとangular.jsonの関係
重要なポイント
Angularでは、Vitestの設定はangular.jsonから管理されるのが特徴です。
通常のVitestとは違い、
- vitest.config.tsに直接書くのではなく
- angular.json経由で設定する
という仕組みになっています。
なぜangular.jsonで管理するのか
Angular CLIが以下を自動で制御するためです。
- ビルド設定
- テスト対象ファイル
- 実行環境
そのため、開発者は細かい設定を意識しなくても動く設計になっています。
angular.jsonのtest設定
angular.jsonには、テスト用の設定があります。
{
"projects": {
"your-project": {
"architect": {
"test": {
"builder": "@angular/build:unit-test",
"options": {}
}
}
}
}
}
このtestが、Vitestの実行設定になります。
angular.jsonで設定できる項目
Angularでは以下の設定をカスタマイズできます。
include
"include": ["**/*.spec.ts"]
テスト対象ファイルを指定します。
デフォルトでは .spec.ts や .test.ts が対象です。
exclude
"exclude": ["**/e2e/**"]
テスト対象から除外するファイルを指定します。
setupFiles
"setupFiles": ["src/test-setup.ts"]
テスト実行前に読み込まれるファイルです。
用途：
- polyfill
- グローバルモック
- 共通初期化処理
providersFile
"providersFile": "src/test-providers.ts"
AngularのDI（依存注入）をグローバルに設定できます。
例えば：
- HttpClientのモック
- 共通サービス
を一括設定できます。
coverage
"coverage": true
カバレッジ（テスト網羅率）を取得します。
CLIからも実行可能です。
ng test --coverage
コードカバレッジについては、詳細は「Angular × Vitestでコードカバレッジを測定する方法｜設定・確認・しきい値まで完全解説」で解説しています。
browsers
"browsers": ["chromium"]
通常はコンソール環境で実行結果などが表示されますが、ブラウザでテストを実行することも可能です。
- Playwright
- WebdriverIO
などと連携できます。
Vitest設定ファイルは必要？
基本は不要
Angular CLIが内部でVitest設定を生成するため、通常は不要です。
カスタマイズしたい場合
以下のように指定できます。
"runnerConfig": "vitest.config.ts"
またはCLIで生成できます。
ng generate config vitest
ただし注意点があります。
- Angularが一部設定を上書きする
- 完全自由ではない
まとめ
Angular のテスト環境は、従来とは大きく異なります。
- Vitestが標準テストランナー
- angular.jsonで設定を管理
重要なポイントはこれです。
