Angularでアプリケーションを開発する際、避けて通れないのが単体テスト。 Angular CLIでプロジェクトを作成すると自動的にテストの設定が組み込まれますが、そこに含まれているテストライブラリは一体何なのか? また、最近よく聞く Jest との違いは?という疑問に答えていきます。
Angular標準のテスト環境:Karma + Jasmine
Angular CLI でプロジェクトを作成すると、デフォルトで以下のテスト構成が設定されます。
- Karma:テストランナー(ブラウザ上でテストを実行)
- Jasmine:テストフレームワーク(
describe
,it
,expect
などでテストを記述)
ng test
このコマンドでブラウザが立ち上がり、テストが実行される仕組みです。
Jestとは?
一方で、最近は Jest を使ったテストが注目されています。
比較表:Karma vs Jest
項目 | Karma + Jasmine | Jest |
---|---|---|
動作環境 | ブラウザ | Node.js(ブラウザ不要) |
実行速度 | やや遅め(ブラウザ起動あり) | 速い(Node内で完結) |
標準構成 | Angular CLIに標準搭載 | 自分で設定が必要 |
スナップショット | なし | あり(UIの変化を検出できる) |
テスト記法 | Jasmine | Jasmineに似ている(移行しやすい) |
学習コスト | 低(標準) | やや高(設定・導入が必要) |
Jestの導入手順(簡易)
- 依存関係をインストール
npm install --save-dev jest jest-preset-angular @types/jest
jest.config.js
を作成setup-jest.ts
を作成angular.json
のtest
スクリプトを修正
→ 詳細な手順は別記事で解説予定。
どちらを選ぶべき?
既存プロジェクトで手軽にテストをしたい → 標準の Karma + Jasmine で十分。
高速なテスト実行やCI環境での実行を重視 → Jest がおすすめ。
おわりに
Angularの単体テストは、CLIのおかげで最初の一歩が簡単です。 ただし、チーム開発やCI/CD導入を進める中で、Jestのような代替手段を検討する価値もあります。
テストは「とりあえず書けばいい」から「速く・正確に回せる」へと進化してきています。 Jestの導入記事も今後紹介していくので、気になる方はぜひチェックしてください。