テストピラミッド vs テスティングトロフィー: モダンフロントエンドのテスト戦略ガイド

// tsconfig.json - 厳格な型チェック設定
{
  "compilerOptions": {
    "strict": true,                          // 厳格な型チェックを有効化
    "forceConsistentCasingInFileNames": true,
    "noUncheckedIndexedAccess": true,        // インデックスアクセスの安全性
    "noImplicitReturns": true                // 暗黙のreturnを禁止
  }
}

// .eslintrc - コード品質ルール
{
  "extends": ["eslint:recommended", "@typescript-eslint/recommended"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

// 型ガード関数のテスト例
import { describe, it, expect } from 'vitest';
import { assertStatus, ValidationError } from './validators';
 
describe('assertStatus', () => {
  it('有効なステータスの場合、エラーをスローしない', () => {
    expect(() => assertStatus('pending')).not.toThrow();
    expect(() => assertStatus('completed')).not.toThrow();
    expect(() => assertStatus(null)).not.toThrow();
  });
 
  it('無効なステータスの場合、エラーをスローする', () => {
    expect(() => assertStatus('invalid')).toThrow(ValidationError);
  });
});

// Reactコンポーネントの結合テスト
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';
 
describe('LoginForm', () => {
  it('フォーム入力と送信が正しく動作する', async () => {
    const user = userEvent.setup();
    const onSubmit = vi.fn();
 
    render(<LoginForm onSubmit={onSubmit} />);
 
    // ユーザー視点で操作
    await user.type(
      screen.getByRole('textbox', { name: 'メールアドレス' }),
      'test@example.com'
    );
    await user.type(
      screen.getByLabelText('パスワード'),
      'password123'
    );
    await user.click(screen.getByRole('button', { name: 'ログイン' }));
 
    expect(onSubmit).toHaveBeenCalledWith({
      email: 'test@example.com',
      password: 'password123',
    });
  });
});

// APIレイヤーの結合テスト（tRPC例）
import { describe, it, expect } from 'vitest';
import { createTestCaller } from './test-utils';
 
describe('userRouter', () => {
  it('認証済みユーザーはプロフィールを取得できる', async () => {
    const caller = createTestCaller({ userId: 'user-1', role: 'member' });
 
    const profile = await caller.user.getProfile();
 
    expect(profile).toMatchObject({
      id: 'user-1',
      name: expect.any(String),
    });
  });
 
  it('未認証ユーザーはアクセスできない', async () => {
    const caller = createTestCaller({ session: null });
 
    await expect(caller.user.getProfile()).rejects.toThrow('UNAUTHORIZED');
  });
});

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  testDir: './e2e',
  retries: process.env.CI ? 2 : 0,
  timeout: 30000,
 
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',        // 失敗時のみトレース
    screenshot: 'only-on-failure',  // 失敗時のみスクリーンショット
  },
 
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

// e2e/auth.spec.ts
import { test, expect } from '@playwright/test';
 
test('ユーザー登録からログインまでの一連のフロー', async ({ page }) => {
  // 登録
  await page.goto('/signup');
  await page.getByLabel('メールアドレス').fill('new@example.com');
  await page.getByLabel('パスワード').fill('securePassword123');
  await page.getByRole('button', { name: '登録' }).click();
 
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'ダッシュボード' })).toBeVisible();
});

// バックエンドでの単体テストが有効な例：料金計算ロジック
describe('calculatePrice', () => {
  it('基本料金を返す', () => {
    expect(calculatePrice({ quantity: 1, plan: 'basic' })).toBe(1000);
  });
 
  it('数量割引が適用される', () => {
    expect(calculatePrice({ quantity: 10, plan: 'basic' })).toBe(9000); // 10%割引
  });
 
  it('プレミアムプランは20%増', () => {
    expect(calculatePrice({ quantity: 1, plan: 'premium' })).toBe(1200);
  });
 
  it('数量が0以下はエラー', () => {
    expect(() => calculatePrice({ quantity: 0, plan: 'basic' })).toThrow();
  });
 
  // ... 多くのエッジケースを高速にテスト
});

// ❌ 内部実装に依存したテスト
it('handleSubmitが呼ばれるとsetLoadingがtrueになる', () => {
  const { result } = renderHook(() => useLoginForm());
 
  act(() => {
    result.current.handleSubmit();
  });
 
  // 内部状態をテストしている → 実装を変えると壊れる
  expect(result.current.isLoading).toBe(true);
});

// ✅ ユーザーから見える振る舞いをテスト
it('送信中はボタンが無効化され、ローディング表示になる', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);
 
  await user.click(screen.getByRole('button', { name: 'ログイン' }));
 
  // ユーザーに見える結果をテスト → 内部実装が変わっても壊れない
  expect(screen.getByRole('button', { name: 'ログイン' })).toBeDisabled();
  expect(screen.getByText('送信中...')).toBeInTheDocument();
});

# .github/workflows/ci.yml
name: CI
 
on:
  pull_request:
    branches: [main, develop]
 
jobs:
  # 高速なテストを先に実行（失敗したら後続をスキップ）
  static-and-unit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm ci
      - name: Type check
        run: npm run check-types
      - name: Lint
        run: npm run lint
      - name: Unit tests
        run: npm run test:unit
 
  # 単体テスト通過後に結合テスト
  integration:
    needs: static-and-unit
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Integration tests
        run: npm run test:integration
 
  # マージ時のみE2E実行
  e2e:
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    needs: integration
    runs-on: ubuntu-latest
    steps:
      - name: E2E tests
        run: npm run test:e2e

❌ 曖昧な議論:
「このテスト、もっとちゃんと書いた方がいいのでは？」
「ちゃんとって何ですか...？」
 
✅ 共通言語がある議論:
「この機能は複数コンポーネントが連携するので、
  単体テストより結合テストの方が適切では？」
「確かに、ユーザー視点で振る舞いをテストした方が
  リファクタリング耐性も高くなりますね」

## テスト方針（例）
- 静的テスト: 全コードに適用（TypeScript strict + ESLint）
- 単体テスト: 複雑なビジネスロジック、ユーティリティ関数
- 結合テスト: UIコンポーネント、APIハンドラ（メイン）
- E2E: ユーザー登録、ログイン、決済フローのみ