フロントエンドテスティング完全ガイド – Jest・Vitest・Playwright

        E2E テスト（少数）
      /    \
     /      \
    /統合テスト\
   /          \
  /ユニットテスト\
 /              \

// Jest セットアップ
npm install --save-dev jest @testing-library/react @testing-library/jest-dom

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['/src/setupTests.js'],
};

// sum.js - テスト対象
export function sum(a, b) {
  return a + b;
}

// sum.test.js - テストコード
import { sum } from './sum';

describe('sum関数', () => {
  test('正の数の合計を計算', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('負の数に対応', () => {
    expect(sum(-1, -2)).toBe(-3);
  });

  test('0を返す', () => {
    expect(sum(0, 0)).toBe(0);
  });
});

// Button.jsx
export function Button({ label, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

// Button.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

describe('Button コンポーネント', () => {
  test('ボタンがレンダリングされる', () => {
    render(<Button label="Click me" onClick={() => {}} />);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  test('クリックで onClick が呼ばれる', () => {
    const handleClick = jest.fn();
    render(<Button label="Click" onClick={handleClick} />);
    fireEvent.click(screen.getByText('Click'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  test('disabled 属性が適用される', () => {
    render(<Button label="Disabled" onClick={() => {}} disabled />);
    expect(screen.getByText('Disabled')).toBeDisabled();
  });
});

// Card.test.jsx
import { render } from '@testing-library/react';
import { Card } from './Card';

describe('Card コンポーネント', () => {
  test('スナップショットテスト', () => {
    const { container } = render(
      <Card title="Test" description="Description" />
    );
    expect(container).toMatchSnapshot();
  });
});

// vitest.config.js
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setup.ts',
  },
})

# Vitest セットアップ
npm install --save-dev vitest jsdom @testing-library/react

# ウォッチモードで実行（テスト自動再実行）
npm run test

# テストカバレッジを表示
npm run test -- --coverage

# UI でテスト結果を表示
npm run test -- --ui

# Playwright セットアップ
npm install -D @playwright/test

# プロジェクト初期化
npx playwright install

// login.spec.ts
import { test, expect } from '@playwright/test';

test.describe('ログイン機能', () => {
  test('ユーザーがログインできる', async ({ page }) => {
    // ログインページに移動
    await page.goto('http://localhost:3000/login');

    // ユーザー名を入力
    await page.fill('input[name="username"]', 'testuser');

    // パスワードを入力
    await page.fill('input[name="password"]', 'password123');

    // ログインボタンをクリック
    await page.click('button:has-text("ログイン")');

    // ダッシュボードページに遷移したか確認
    await expect(page).toHaveURL('http://localhost:3000/dashboard');

    // ウェルカムメッセージが表示されているか
    await expect(page.locator('h1')).toContainText('ようこそ');
  });

  test('無効な認証情報でエラーが表示される', async ({ page }) => {
    await page.goto('http://localhost:3000/login');
    await page.fill('input[name="username"]', 'invalid');
    await page.fill('input[name="password"]', 'wrong');
    await page.click('button:has-text("ログイン")');

    // エラーメッセージが表示される
    await expect(page.locator('.error-message')).toBeVisible();
  });
});

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,

  // スクリーンショット設定
  use: {
    screenshot: 'only-on-failure',  // 失敗時のみスクショ
    video: 'retain-on-failure',      // 失敗時のみ動画保存
  },

  // 複数ブラウザでテスト
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

// ❌ 良くないテスト（内部実装に依存）
test('state を確認', () => {
  const { getByTestId } = render(<Counter />);
  const stateValue = getByTestId('counter-state').textContent;
  expect(stateValue).toBe('0');
});

// ✅ 良いテスト（ユーザー視点）
test('ボタンをクリックでカウント増加', () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /increment/i });
  const display = screen.getByText('0');

  fireEvent.click(button);

  expect(screen.getByText('1')).toBeInTheDocument();
});

// テスト対象の優先順位（上から順に推奨）
// 1. getByRole - アクセシビリティ属性を使用
screen.getByRole('button', { name: /submit/i });

// 2. getByLabelText - ラベル経由
screen.getByLabelText('Username');

// 3. getByPlaceholderText - プレースホルダ経由
screen.getByPlaceholderText('Enter name');

// 4. getByText - テキスト内容経由
screen.getByText('Submit');

// 5. getByTestId - テスト用 ID（最終手段）
screen.getByTestId('submit-button');

# カバレッジレポート生成
npm run test -- --coverage

# 出力例
# ─────────────────────────────────────
# File      | Stmts | Branch | Funcs
# ─────────────────────────────────────
# sum.js    | 100%  | 100%   | 100%
# button.js | 85%   | 75%    | 90%
# ─────────────────────────────────────

# .github/workflows/test.yml
name: Test

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Node.js セットアップ
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: 依存をインストール
        run: npm ci

      - name: ユニットテスト実行
        run: npm run test

      - name: ビルド確認
        run: npm run build

      - name: E2E テスト実行
        run: npm run test:e2e