Contents
1️⃣ Jestとは何か – 特徴とメリット
Jest は Facebook（現 Meta） が開発した、JavaScript 向けのオールインワンテストフレームワークです。設定がほぼ不要な「ゼロコンフィギュレーション」方式を採用しているため、プロジェクトに導入するハードルが非常に低い点が最大の魅力です。
- 統合されたランナー・アサーション・モック機能
- 追加のツールやプラグインを別途インストールする必要がありません。
- スナップショットテスト（React コンポーネントや UI 出力の差分検出）
- ファイル単位の自動並列実行
- テストファイルは CPU コア数に応じて自動で分割され、CI 環境では 実行時間が短縮されるケースが報告されています（※具体例は Qiita の記事「Jest入門 – 並列実行の効果」参照）。
まとめ
設定不要で高度な機能が標準装備されているため、フロントエンド・バックエンド問わずすぐにテスト自動化を開始できるのが Jest の大きなメリットです。
2️⃣ 環境構築とインストール
2.1 npm と Yarn のインストール手順
| ツール | 主な特徴 |
|---|---|
| npm | Node.js に同梱されており、追加インストールが不要。 |
| Yarn | 高速な依存関係解決と deterministic lockfile（yarn.lock）を提供。 |
どちらのパッケージマネージャでも、以下の手順で Jest を開発依存として導入できます。
|
1 2 3 4 5 6 7 8 |
# npm の場合 npm init -y # package.json を作成 npm i --save-dev jest # devDependencies にインストール # Yarn の場合 yarn init -y yarn add --dev jest |
package.json にテストスクリプトを追加すれば、コマンド一つで実行可能です。
|
1 2 3 4 5 6 |
{ "scripts": { "test": "jest" } } |
2.2 jest.config.js の基本設定
Jest はデフォルトでも多くのケースに対応できますが、プロジェクト固有の要件（例：TypeScript 対応やカバレッジ出力先変更）に合わせて設定ファイルを用意すると管理が楽になります。
|
1 2 3 4 5 6 7 8 |
// jest.config.js module.exports = { testEnvironment: 'node', // Node.js 用テスト環境 collectCoverage: true, // カバレッジ取得を有効化 coverageDirectory: 'coverage', // 出力先ディレクトリ moduleFileExtensions: ['js','jsx','ts','tsx'], // 読み込む拡張子 }; |
設定ファイルをプロジェクトルートに置くだけで、次のようにカバレッジ HTML を生成できます。
|
1 2 |
npm test -- --coverage # => coverage/index.html が作成される |
ポイント
npm（または Yarn）で Jest をインストールし、最低限のjest.config.jsを追加するだけで、すぐにテスト実行とカバレッジ取得が可能です。
3️⃣ 基本的なテストの書き方
3.1 describe, test, expect の使い方
Jest のテストは次の３要素で構成されます。
| 要素 | 用途 |
|---|---|
describe |
テストケースを論理的にグループ化し、出力結果を階層化。 |
**test（または it） |
個々のテストシナリオを定義。 |
expect |
アサーション（期待値）の検証。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// sum.js function sum(a, b) { return a + b; } module.exports = sum; // sum.test.js const sum = require('./sum'); describe('sum 関数の基本動作', () => { test('2 と 3 を足すと 5 になること', () => { expect(sum(2, 3)).toBe(5); }); test('負の数同士でも正しく計算できること', () => { expect(sum(-1, -4)).toBe(-5); }); }); |
実行結果は次のように階層的に表示され、どこで失敗したかが一目で分かります。
|
1 2 3 4 5 |
PASS ./sum.test.js sum 関数の基本動作 ✓ 2 と 3 を足すと 5 になること (3 ms) ✓ 負の数同士でも正しく計算できること |
3.2 アサーションパターンとカスタムマッチャー
Jest が提供する標準マッチャー（toBe, toEqual, toContain 等）に加えて、独自ロジックを持つカスタムマッチャー を作成できます。これによりビジネスルール固有の検証を再利用可能な形で表現できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// customMatchers.js expect.extend({ toBeToday(received) { const today = new Date().toDateString(); const pass = received.toDateString() === today; return { message: () => `expected ${received} ${pass ? 'not ' : ''}to be today's date`, pass, }; }, }); |
|
1 2 3 4 5 6 7 8 |
// usage.test.js require('./customMatchers'); test('date が今日であること', () => { const now = new Date(); expect(now).toBeToday(); // カスタムマッチャー使用例 }); |
まとめ
describe・test・expectの基本構造を押さえた上で、標準マッチャーとカスタムマッチャーを組み合わせることで、シンプルかつ拡張性の高いテストコードが書けます。
4️⃣ 高度なテスト技法 – モックと非同期処理
4.1 jest.fn と jest.mock の活用例
| 手法 | 対象 | 主な用途 |
|---|---|---|
jest.fn |
関数単体 | 呼び出し回数や引数の検証に便利。 |
jest.mock |
モジュール全体 | 外部 API・DB アクセスなど重い依存を置き換える。 |
4.1‑1 モジュールモック（jest.mock）
|
1 2 3 4 5 6 7 8 |
// api.js const axios = require('axios'); async function fetchUser(id) { const response = await axios.get(`https://api.example.com/users/${id}`); return response.data; } module.exports = { fetchUser }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// api.test.js jest.mock('axios'); // axios 全体をモック const axios = require('axios'); const { fetchUser } = require('./api'); test('fetchUser が正しいデータを返すこと', async () => { const mockData = { id: 1, name: 'Alice' }; axios.get.mockResolvedValue({ data: mockData }); const user = await fetchUser(1); expect(user).toEqual(mockData); expect(axios.get).toHaveBeenCalledWith('https://api.example.com/users/1'); }); |
4.1‑2 関数スタブ（jest.fn）
|
1 2 3 4 5 6 7 8 9 10 |
const logger = { info: jest.fn(), }; function process(value) { if (value > 0) logger.info('positive'); } process(5); expect(logger.info).toHaveBeenCalledWith('positive'); |
4.2 非同期コードのテストパターン
| パターン | 記述例 |
|---|---|
async/await |
await を使って自然なフローで検証。 |
.resolves / .rejects |
Promise が解決・拒否されることをマッチャーで表現。 |
|
1 2 3 4 5 6 |
// asyncUtil.js function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } module.exports = { delay }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// asyncUtil.test.js const { delay } = require('./asyncUtil'); test('delay が指定時間後に解決すること (async/await)', async () => { const start = Date.now(); await delay(100); expect(Date.now() - start).toBeGreaterThanOrEqual(100); }); test('reject 時の検証 (.rejects)', async () => { await expect(Promise.reject(new Error('fail'))).rejects.toThrow('fail'); }); |
まとめ
jest.fn／jest.mockによるモックと、async/await・.resolves/.rejectsを組み合わせれば、外部依存や非同期ロジックを安全かつ簡潔にテストできます。
5️⃣ テスト結果活用と CI への組み込み
5.1 テストカバレッジ取得とレポート閲覧
Jest の --coverage オプションは、ステートメント・ブランチ・関数・行 の網羅率を自動で計測し、HTML レポートとして出力します。
|
1 2 3 4 5 6 7 8 |
// package.json の scripts 部分（抜粋） { "scripts": { "test": "jest", "coverage": "jest --coverage" } } |
実行例:
|
1 2 |
npm run coverage # => coverage/lcov-report/index.html が生成される |
レポートはファイルごとに色分けされたカバレッジ率が表示され、未テスト領域を一目で把握できます。
5.2 GitHub Actions での Jest 実行設定
以下は Node.js LTS (v18) 環境でテストとカバレッジ取得を自動化する最小構成です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
# .github/workflows/ci.yml name: CI on: push: branches: [ main ] pull_request: branches: [ main ] jobs: test: runs-on: ubuntu-latest strategy: matrix: node-version: [18.x] steps: - uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} cache: npm - run: npm ci # 再現性のあるインストール - run: npm test -- --coverage - name: Upload coverage artifact uses: actions/upload-artifact@v3 with: name: coverage-report path: coverage/ |
5.2‑1 ブランチ保護とカバレッジ基準
GitHub の ブランチ保護 設定で「最低カバレッジ 80%」を必須条件にすれば、プルリクエストがマージされる前に自動チェックが走ります。これにより品質基準がプロジェクト全体に徹底できます。
5.3 代表的なトラブルシューティング
| 現象 | 原因例 | 対処法 |
|---|---|---|
テストが skipped と表示される |
test.only や .skip が残っている |
該当コードを削除またはコメントアウト |
モジュール解決エラー (Cannot find module) |
Jest のデフォルト解決パスに対象ディレクトリが含まれない | moduleDirectories や moduleNameMapper を jest.config.js に追加 |
| カバレッジが 0% になる | Babel/TypeScript がトランスパイルされていない | babel-jest、ts-jest を導入し transform 設定を追記 |
ポイント
Jest のカバレッジ機能と GitHub Actions の組み合わせで継続的な品質保証が実現します。エラーはまず設定ファイル（jest.config.js）や CI ワークフローを確認することで多くの場合解決できます。
6️⃣ 次のステップ – サンプルリポジトリで実践
6.1 ハンズオン手順
-
サンプルリポジトリをクローン
bash
git clone https://github.com/your-org/jest-sample.git
cd jest-sample
npm ci -
自分のロジックを追加
-
srcディレクトリに実装コード（例：ユーティリティ関数）を書き、同階層の__tests__にテストファイルを作成。 -
ローカルでテスト実行
bash
npm test -
CI へプッシュ
.github/workflows/ci.ymlをコミットし、GitHub 上で Actions が走ることを確認。緑のステータスが表示されたら成功です。
6.2 学習を深めるための追加リソース
| タイトル | メディア | URL |
|---|---|---|
| Jest公式ドキュメント | Webサイト | https://jestjs.io/docs/getting-started |
| 「Jestによるテスト入門」 | Zenn | https://zenn.dev/kaze_wind/articles/be21d60ffbbd40 |
| 「Jest入門 – 並列実行の効果」 | Qiita | https://qiita.com/yourname/items/jest-parallel |
結論
この記事で紹介したインストール手順、基本的なテスト構造、モック・非同期処理の書き方、そして CI への組み込みまでを一通り実践すれば、Jest を使ったテスト自動化の全体像が確実に身につきます。まずはサンプルリポジトリで手を動かし、「コードを書いたらすぐにテストを書く」 習慣をチームに根付かせましょう。