Angular開発メモ

調べたことを記録しておきます。

【Angular】単体テストライブラリまとめ:KarmaとJestどっちを使う?

Angularでアプリケーションを開発する際、避けて通れないのが単体テスト。 Angular CLIでプロジェクトを作成すると自動的にテストの設定が組み込まれますが、そこに含まれているテストライブラリは一体何なのか? また、最近よく聞く Jest との違いは?という疑問に答えていきます。


Angular標準のテスト環境:Karma + Jasmine

Angular CLI でプロジェクトを作成すると、デフォルトで以下のテスト構成が設定されます。

  • Karma:テストランナー(ブラウザ上でテストを実行)
  • Jasmine:テストフレームワークdescribe, it, expect などでテストを記述)
ng test

このコマンドでブラウザが立ち上がり、テストが実行される仕組みです。


Jestとは?

一方で、最近は Jest を使ったテストが注目されています。

  • Facebook製のテストフレームワーク
  • Node.js上で動作するため、ブラウザ不要&高速
  • Angularでも使用可能(設定はやや必要)
  • スナップショットテストなど高度な機能も搭載

比較表:Karma vs Jest

項目 Karma + Jasmine Jest
動作環境 ブラウザ Node.js(ブラウザ不要)
実行速度 やや遅め(ブラウザ起動あり) 速い(Node内で完結)
標準構成 Angular CLIに標準搭載 自分で設定が必要
スナップショット なし あり(UIの変化を検出できる)
テスト記法 Jasmine Jasmineに似ている(移行しやすい)
学習コスト 低(標準) やや高(設定・導入が必要)

Jestの導入手順(簡易)

  1. 依存関係をインストール
npm install --save-dev jest jest-preset-angular @types/jest
  1. jest.config.js を作成
  2. setup-jest.ts を作成
  3. angular.jsontest スクリプトを修正

→ 詳細な手順は別記事で解説予定。


どちらを選ぶべき?

  • 既存プロジェクトで手軽にテストをしたい → 標準の Karma + Jasmine で十分。

  • 高速なテスト実行やCI環境での実行を重視Jest がおすすめ。


おわりに

Angularの単体テストは、CLIのおかげで最初の一歩が簡単です。 ただし、チーム開発やCI/CD導入を進める中で、Jestのような代替手段を検討する価値もあります。

テストは「とりあえず書けばいい」から「速く・正確に回せる」へと進化してきています。 Jestの導入記事も今後紹介していくので、気になる方はぜひチェックしてください。