この記事は「Angular × Vite ユニットテスト入門｜Vitestで始めるテスト完全ガイド」シリーズの一部です。
AngularでVitestを使う方法｜デフォルト環境の確認とテスト実行手順
現在のAngularでは、ユニットテスト環境としてVitestが標準で組み込まれています。
そのため、Angularプロジェクトを作成した時点でテスト環境はすでに用意されています。
本記事では、Angularのデフォルトで用意されているVitest環境を前提に、「何が入っているのか」「どう使うのか」を初心者向けにわかりやすく解説します。
この記事でわかること
- Angularに標準で入っているテスト環境の中身
- Vitestの設定がどこにあるか
- テストの実行方法
- 最初のテストの書き方
前提
- Angular 19以降（推奨：最新）
- Angular CLIでプロジェクトを作成済み
Angularのテスト環境は最初から用意されている
結論
Angularの新規プロジェクトには、以下が最初から含まれています。
- Vitest（テストランナー）
- jsdom（DOM環境）
- テスト設定ファイル
- サンプルテストコード
つまり、追加インストールなしですぐにテストが実行できます。
プロジェクト作成時の確認ポイント
Angularプロジェクトを作成するとき、以下のように実行します。
ng new プロジェクト名
このとき、テスト環境としてVitestが自動で設定されます。
特別な選択をしなくても問題ありません。
Vitest関連ファイルの構成
Angularプロジェクトには、すでに以下のファイルが存在します。
テストファイル（.spec.ts）
コンポーネントごとにテストファイルが生成されます。
例：
app.component.spec.ts
tsconfig.spec.json
テスト用のTypeScript設定です。
{
"compilerOptions": {
"types": ["vitest/globals"]
}
}
テストを実行する方法
Angularでは、以下のコマンドでテストを実行できます。
ng test
実行すると、Vitestが起動し、以下のようにすべてのテストが実行されます。
実際のテストコードの例
Angularでは、以下のようにテストを書きます。
import { describe, it, expect } from 'vitest';
describe('sample', () => {
it('1 + 1 = 2', () => {
expect(1 + 1).toBe(2);
});
});
基本はこの3つです。
- describe：グループ
- it：テストケース
- expect：検証
よくある勘違い
Vitestは自分で入れる必要がある？
不要です。
現在のAngularでは最初から入っています。
Karmaは必要？
不要です。
Karmaは旧環境であり、新規開発では使いません。
Viteの設定は必要？
通常は不要です。
Angular CLIが内部で設定しています。
まとめ
現在のAngularでは、テスト環境の導入は不要です。
- Vitestは最初から入っている
- 設定も自動で完了している
- すぐにテストを書き始められる
そのため重要なのは、「導入」ではなく「使い方」です。
まずはテストを実行し、1つでもテストを書いてみることから始めましょう。
