Jest のセットアップと基本テスト
Jest をインストールし、describe/it/expect テストを書き、toBe や toEqual などの matcher を使い、開発中は watch モードでテストを実行します。
「Jest のセットアップと基本テスト」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
フロントエンドコードをテストする理由
テストは、コードを変更したときにリグレッションを検出します。期待される動作をドキュメント化します。リファクタリングする自信も与えてくれます。テストがなければ、変更によって別の箇所が壊れていないか分からず、毎回の変更が賭けになってしまいます。
Jestのインストール
Vite + Reactプロジェクトでは、Vitest（ViteネイティブでJest互換のテストランナー）を使用します。それ以外の構成では、TypeScript用のbabel-jestまたはts-jestとともにJestをインストールします。
# Vitest (preferred for Vite projects):
npm install -D vitest
# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jestテストファイルの命名
テストファイルはソースファイルの隣に配置します（Button.test.ts、utils.spec.tsなど）。または、__tests__/フォルダーに配置します。Jestは*.test.*または*.spec.*に一致するファイルを見つけます。
describe、it、expect
describeブロック（テストのグループ）と、it/test関数（個々のテスト）でテストを構成します。expectでアサーションを行います。
import { add, formatCurrency } from './utils';
describe('Math utils', () => {
it('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
describe('Currency formatting', () => {
it('formats USD', () => {
expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
});
});よく使うMatcher
Jestには多くのMatcherがあります。toBe（厳密な等価性）、toEqual（深い等価性）、toContain、toHaveLength、toBeNull、toBeTruthy、toBeFalsy、toThrow、toBeGreaterThanなどです。
expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();非同期コードのテスト
テストではPromiseを返すか、async/awaitを使用します。Jestは、テストを完了と判定する前にPromiseが解決するのを待ちます。
it('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Alice');
});
// Or with resolves/rejects matchers:
it('resolves with user', () => {
return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});beforeEachとafterEach
テストを分離した状態に保つため、各テストの前後にセットアップとクリーンアップを実行します。
describe('User service', () => {
beforeEach(() => {
db.seed();
});
afterEach(() => {
db.clear();
});
it('creates a user', async () => {
const user = await userService.create({ name: 'Alice' });
expect(user.id).toBeDefined();
});
});テストの実行
npm testですべてのテストを実行します。npm test -- --watch（Jest）またはwatchモードのvitestを使うと、ファイルの変更時にテストを再実行します。VitestのUI（vitest --ui）では、ブラウザベースのテストランナーを使用できます。
テストカバレッジ
jest --coverage（またはvitest run --coverage）を実行すると、どの行がテストされているかを示すカバレッジレポートが生成されます。カバレッジ70%以上は、チームでよく設定される目標です。カバレッジが100%でも、バグがないとは限りません。
テストしやすいコードを書く
純粋関数（副作用のない関数）は、そのまま簡単にテストできます。関数は小さく、責務を絞ります。依存関係を直接インポートするのではなく、注入します。そうすると、テストダブルへの置き換えが簡単になります。
テストの分離
各テストは完全に独立している必要があります。互いの副作用に依存するテストは壊れやすくなります。テスト間で可変な状態を共有しないでください。afterEachですべてのモックをリセットします。
クイックチェック
2つのオブジェクトの深い等価性を確認するJestのMatcherはどれですか？
まとめ：Jestの基本
describeでテストをグループ化します。it/testで個々のテストを定義します。expectとMatcherで結果をアサートします。プリミティブにはtoBeを使用します。オブジェクトや配列にはtoEqualを使用します。非同期テストではasync/awaitを使うか、Promiseを返します。beforeEach/afterEachでテストを分離します。カバレッジレポートで、どの行がテストされているかを確認できます。純粋関数は最もテストしやすい関数です。
よくある質問
「Jest のセットアップと基本テスト」レッスンは無料ですか？
はい。「Jest のセットアップと基本テスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「Jest のセットアップと基本テスト」で何を学びますか？
Jest をインストールし、describe/it/expect テストを書き、toBe や toEqual などの matcher を使い、開発中は watch モードでテストを実行します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Jest のセットアップと基本テスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Jest のセットアップと基本テスト
- @testing-library/react：render と userEvent
- @testing-library/vue：コンポーネントのマウント
- モジュールと API 呼び出しのモック