【2026年版】Jestの始め方 — セットアップから最初のユニットテストまで完全ガイド

手動テストは「実際に画面を操作して確認する」方法だけど、自動テストは「コードがコードをテストする」仕組みだよ。一度テストコードを書いておけば、何度でも自動で実行できるから、機能を追加・変更するたびに「前の機能が壊れていないか」を瞬時に確認できるんだ。これを「リグレッションテスト（デグレ防止）」と呼ぶよ。大きなプロジェクトでは手動テストだけでは追いつかないから、自動テストは必須のスキルなんだ。

大きく3種類あるよ。ユニットテストは「関数やクラス単体」が正しく動くかを確認する最も小さいテスト。統合テスト（インテグレーションテスト）は「複数のコンポーネントや外部サービスと組み合わせた」動作を確認するテスト。E2Eテスト（End-to-End）はブラウザを自動操作して「ユーザー視点での全体的な動作」を確認するテストだよ。まずはユニットテストから始めるのが一般的だね。

どちらも人気のJavaScript/TypeScriptテストフレームワークだよ。JestはFacebookが作った老舗で、Reactプロジェクトではデフォルトとして使われることが多いね。VitestはVite（フロントエンドビルドツール）ベースで、ViteやSvelteKitプロジェクトでは自然な選択肢だよ。APIがほぼ同じなので、一方を覚えればもう一方もすぐ使えるんだ。2026年現在は新規プロジェクトではVitestの採用が増えているね。

ここで「npm create vite@latest test-project -- --template vanilla-ts」でプロジェクトを作って、「npm install -D vitest」でインストールしてみてね。「package.json」のscriptsに「test: vitest」を追加して、簡単なテストを書いて「npm test」を実行してみよう！（試してみて）

テストは「describe（テストのグループ）」「test/it（個々のテストケース）」「expect（期待値の検証）」の3要素で書くよ。たとえば「足し算関数のテスト」なら「describe('add関数', () => { test('1+2は3になる', () => { expect(add(1, 2)).toBe(3) }) })」と書くんだ。「expect(値).toBe(期待値)」が基本で、「toEqual（オブジェクト比較）」「toBeTruthy（真値）」「toContain（配列・文字列を含む）」など多くのマッチャーが用意されているよ。

モック（Mock）という技術を使うよ。「jest.fn()」や「vi.fn()」でダミーの関数を作って、実際の外部サービスの代わりに使うんだ。たとえば「fetchUserFromAPI」という関数を「vi.fn().mockResolvedValue({name: 'ひよこ'})」でモックすれば、実際にAPIを呼ばずにテストできるよ。モジュール全体をモックする「vi.mock('モジュールパス')」も覚えておくと便利だね。

TDD（Test Driven Development）は「まずテストを書いてから実装する」開発手法だよ。①失敗するテストを書く→②最小限のコードでテストを通す→③リファクタリング、というサイクルを繰り返すんだ。最初は慣れなくて時間がかかるけど、設計が自然と「テストしやすい（=疎結合な）コード」になるというメリットがあるよ。最初から完璧なTDDを目指さなくても、書き終わった後にテストを追加するだけでも十分価値があるよ。

テストカバレッジは「コード全体のうち何%がテストされているか」を示す指標だよ。「vitest --coverage」や「jest --coverage」で計測できるんだ。100%を目指す必要はなく、一般的には80%前後が目安とされているよ。カバレッジが高くてもテストの質が低ければ意味がないし、重要なビジネスロジックを優先してテストする考え方が大切だね。

GitHub Actionsなら「npm test」をワークフローのstepに追加するだけだよ。「runs-on: ubuntu-latest」の環境で「npm ci」→「npm test」を実行するだけで、プルリクエストのたびにテストが自動実行されるんだ。テストが失敗したらマージをブロックする設定もできるよ。これによって「テストが通っていないコードは本番に入らない」という安全網が自動で張られるんだ。