この記事は「Angular × Vite ユニットテスト入門｜Vitestで始めるテスト完全ガイド」シリーズの一部です。
Angularのテスト環境まとめ｜Karma・Jest・Vitestの違い
Angularのテスト環境はここ数年で大きく変わりました。
以前は「Karma + Jasmine」が標準でしたが、現在はVitestが公式のデフォルト環境になっています。
そのため、これからAngularのテストを始める人は「どれを選ぶべきか」を正しく理解することが重要です。
本記事では、Angularの主要なテスト環境である「Karma」「Jest」「Vitest」の違いを、最新情報ベースでわかりやすく解説します。
この記事でわかること
- Angularの最新テスト環境の状況
- Karma・Jest・Vitestの違い
- それぞれのメリット・デメリット
- 今選ぶべきテスト環境
Angularのテスト環境は今どうなっているのか
結論（2025年以降）
現在のAngularのテスト環境は以下の状況です。
- Vitest：公式デフォルト（新規プロジェクト）
- Karma：非推奨・レガシー（まだ使用可能）
- Jest：サードパーティで利用
Angular CLIでは、新規プロジェクト作成時にVitestが標準で導入されるようになっています。
また、Karmaは長年使われてきましたが、現在は**置き換え対象（実質的に非推奨）**です。
各テスト環境の概要
Vitest（現在の標準）
特徴
- Angularの公式デフォルト
- Viteベースの高速テストランナー
- Node.js上で動作（jsdomなどでDOMを再現）
- Jest互換のAPI
Vitestは、Angular 21以降で正式に標準テストランナーとなりました。
メリット
- 非常に高速（ブラウザ起動不要）
- モダンな開発体験
- TypeScriptとの相性が良い
- 設定がシンプル
デメリット
- 比較的新しいため情報が少なめ
- 一部の高度なテストは設定が必要
向いているケース
- 新規Angularプロジェクト
- Vite環境を使う場合
- 開発効率を重視する場合
Karma（旧標準・レガシー）
特徴
- ブラウザ上でテストを実行
- Angular CLIの旧デフォルト
現在でも使用可能ですが、Angular公式はVitestへの移行を推奨しています。
メリット
- 実ブラウザでテストできる
- 長年の実績がある
デメリット
- テスト実行が遅い（ブラウザ起動が必要）
- 設定が複雑
- エコシステムが古い
向いているケース
- 既存プロジェクト（移行できない場合）
- ブラウザ依存のテストが多い場合
Jest（中間ポジション）
特徴
- Node.jsベースのテストフレームワーク
- Angular公式ではないが広く使われている
メリット
- 高速
- 情報量が豊富
- モック機能が強力
デメリット
- Angularとの統合に追加設定が必要
- 将来的な標準ではない
向いているケース
- 既にJestを使っているプロジェクト
- Reactなど他環境と統一したい場合
Karma・Jest・Vitestの違い（最新版）
実行環境の違い
- Karma：ブラウザで実行
- Jest：Node.js（仮想DOM）
- Vitest：Node.js（jsdom / happy-dom）
Vitestはブラウザを起動せず、DOMをシミュレートすることで高速化しています。
実行速度
- Karma：遅い
- Jest：速い
- Vitest：非常に速い
Angularとの関係
- Karma：旧標準
- Jest：非公式
- Vitest：公式標準
将来性
- Karma：低い（非推奨）
- Jest：中
- Vitest：高い（公式）
重要ポイント｜Vitestでもブラウザテストはできる
「Vitestはブラウザで動かない」と思われがちですが、これは誤解です。
Vitestには以下の2つの実行モードがあります。
- jsdom（高速・デフォルト）
- Browser Mode（実ブラウザ）
これにより、従来のKarmaのようなブラウザテストも可能です。
結論｜Angularでは何を選ぶべきか
新規開発の場合
Vitest一択です。
理由は以下です。
- Angular公式の標準
- 最も高速
- 将来性が高い
既存プロジェクトの場合
- Karma → 徐々にVitestへ移行
- Jest → 継続利用でも問題なし
判断まとめ
- 今から始める → Vitest
- 既存維持 → Jest or Karma
- 将来性重視 → Vitest
まとめ
Angularのテスト環境は現在、大きく変化しています。
- Vitest：現在の標準
- Karma：レガシー（非推奨）
- Jest：中間的な選択肢
これからのAngular開発では、Vitestを中心に考えるのが最適です。
まずはVitestでテストを書き始め、モダンな開発環境に慣れていきましょう。
