jest-skill

Jest テストスキル

基本パターン

基本的なテスト

describe('Calculator', () => {
  let calc;
  beforeEach(() => { calc = new Calculator(); });

  test('adds two numbers', () => {
    expect(calc.add(2, 3)).toBe(5);
  });

  test('throws on division by zero', () => {
    expect(() => calc.divide(10, 0)).toThrow('Division by zero');
  });
});

マッチャー

expect(value).toBe(exact);                 // === strict
expect(value).toEqual(object);             // deep equality
expect(value).toBeTruthy();
expect(value).toBeNull();
expect(value).toBeGreaterThan(3);
expect(value).toBeCloseTo(0.3, 5);
expect(str).toMatch(/regex/);
expect(arr).toContain(item);
expect(arr).toHaveLength(3);
expect(obj).toHaveProperty('name');
expect(obj).toMatchObject({ name: 'Alice' });
expect(() => fn()).toThrow(CustomError);

モック

// Mock function
const mockFn = jest.fn();
mockFn.mockReturnValue(42);
mockFn.mockResolvedValue({ data: 'test' });
expect(mockFn).toHaveBeenCalledWith('arg1');
expect(mockFn).toHaveBeenCalledTimes(1);

// Mock module
jest.mock('./database');
const db = require('./database');
db.getUser.mockResolvedValue({ name: 'Alice' });

// Mock with implementation
jest.mock('./api', () => ({
  fetchUsers: jest.fn().mockResolvedValue([{ name: 'Alice' }]),
}));

// Spy
const spy = jest.spyOn(console, 'log').mockImplementation();
expect(spy).toHaveBeenCalledWith('expected');
spy.mockRestore();

// Fake timers
jest.useFakeTimers();
jest.advanceTimersByTime(1000);
jest.useRealTimers();

非同期テスト

test('fetches users', async () => {
  const users = await fetchUsers();
  expect(users).toHaveLength(3);
});

test('resolves with data', () => {
  return expect(fetchData()).resolves.toEqual({ data: 'value' });
});

test('rejects with error', () => {
  return expect(fetchBadData()).rejects.toThrow('not found');
});

React コンポーネントのテスト（Testing Library）

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import LoginForm from './LoginForm';

test('submits login form', async () => {
  const onSubmit = jest.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  fireEvent.change(screen.getByLabelText('Email'), {
    target: { value: '[email protected]' },
  });
  fireEvent.change(screen.getByLabelText('Password'), {
    target: { value: 'password123' },
  });
  fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(onSubmit).toHaveBeenCalledWith({
      email: '[email protected]', password: 'password123',
    });
  });
});

スナップショットテスト

test('renders correctly', () => {
  const tree = renderer.create(<Button label="Click" />).toJSON();
  expect(tree).toMatchSnapshot();
});
// Update: jest --updateSnapshot

アンチパターン

悪い例	良い例	理由
expect(x === y).toBe(true)	expect(x).toBe(y)	エラーメッセージがより適切です
非同期処理で await を使わない	常に await を使う	失敗が握りつぶされます
すべてをスナップショットにする	UI はスナップショットで、ロジックはアサーションで検証する	スナップショット疲れを招きます

クイックリファレンス

タスク	コマンド
すべて実行	npx jest
ウォッチ	npx jest --watch
カバレッジ	npx jest --coverage
スナップショットを更新	npx jest --updateSnapshot
ファイルを実行	npx jest tests/calc.test.js
単一のテスト	test.only('name', () => {})

詳細なパターン

本番環境向けのパターンについては、reference/playbook.md を参照してください。

セクション	内容
§1 本番環境の設定	Node と React の設定、パスエイリアス、カバレッジのしきい値
§2 モックの詳細	モジュール／部分／手動モック、スパイ、タイマー、環境変数
§3 非同期パターン	Promise、拒否、イベントエミッター、ストリーム
§4 test.each	テーブル駆動テストのための配列、タグ付きテンプレート、describe.each
§5 カスタムマッチャー	toBeWithinRange、toBeValidEmail、TypeScript の宣言
§6 React Testing Library	userEvent、フック、コンテキストプロバイダー
§7 スナップショットテスト	コンポーネント、インライン、プロパティマッチャー
§8 API サービスのテスト	axios のモック、CRUD パターン、エラー処理
§9 グローバルセットアップ	複数プロジェクトの設定、DB のセットアップ／ティアダウン
§10 CI/CD	カバレッジゲートを備えた GitHub Actions
§11 デバッグ表	よくある10個の問題と解決策
§12 ベストプラクティス	本番環境向けチェックリスト15項目