第13章: テスト

npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',     // ブラウザ DOM をシミュレーション
    globals: true,              // describe, it, expect をグローバルに
    setupFiles: './src/test/setup.js',  // テスト共通設定
  },
})

import '@testing-library/jest-dom';

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:run": "vitest run"
  }
}

export function formatPrice(price) {
  return `${price.toLocaleString()} 円`;
}

import { formatPrice } from './formatPrice';

describe('formatPrice', () => {
  it('数値を円表記にフォーマットする', () => {
    expect(formatPrice(1000)).toBe('1,000 円');
  });

  it('0 を正しくフォーマットする', () => {
    expect(formatPrice(0)).toBe('0 円');
  });

  it('大きな数値にカンマを挿入する', () => {
    expect(formatPrice(1234567)).toBe('1,234,567 円');
  });
});

npm test

function Greeting({ name }) {
  return <h1>こんにちは、{name} さん！</h1>;
}

export default Greeting;

import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

describe('Greeting', () => {
  it('名前を含む挨拶を表示する', () => {
    render(<Greeting name="太郎" />);

    // テキストで要素を検索
    const heading = screen.getByText('こんにちは、太郎 さん！');
    expect(heading).toBeInTheDocument();
  });

  it('h1 要素としてレンダリングされる', () => {
    render(<Greeting name="花子" />);

    const heading = screen.getByRole('heading', { level: 1 });
    expect(heading).toHaveTextContent('こんにちは、花子 さん！');
  });
});

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

export default Counter;

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

describe('Counter', () => {
  it('初期値は 0', () => {
    render(<Counter />);
    expect(screen.getByText('カウント: 0')).toBeInTheDocument();
  });

  it('+1 ボタンでカウントが増加する', async () => {
    const user = userEvent.setup();
    render(<Counter />);

    await user.click(screen.getByRole('button', { name: '+1' }));
    expect(screen.getByText('カウント: 1')).toBeInTheDocument();

    await user.click(screen.getByRole('button', { name: '+1' }));
    expect(screen.getByText('カウント: 2')).toBeInTheDocument();
  });

  it('リセットボタンでカウントが 0 になる', async () => {
    const user = userEvent.setup();
    render(<Counter />);

    // 3 回クリック
    await user.click(screen.getByRole('button', { name: '+1' }));
    await user.click(screen.getByRole('button', { name: '+1' }));
    await user.click(screen.getByRole('button', { name: '+1' }));
    expect(screen.getByText('カウント: 3')).toBeInTheDocument();

    // リセット
    await user.click(screen.getByRole('button', { name: 'リセット' }));
    expect(screen.getByText('カウント: 0')).toBeInTheDocument();
  });
});

import { render, screen } from '@testing-library/react';
import UserList from './UserList';

it('API から取得したユーザーを表示する', async () => {
  render(<UserList />);

  // ローディング表示を確認
  expect(screen.getByText('読み込み中...')).toBeInTheDocument();

  // データが表示されるまで待機（findBy は非同期）
  const user = await screen.findByText('田中太郎');
  expect(user).toBeInTheDocument();

  // ローディングが消えたことを確認
  expect(screen.queryByText('読み込み中...')).not.toBeInTheDocument();
});

import { render, screen } from '@testing-library/react';
import UserList from './UserList';

// fetch をモック化
globalThis.fetch = vi.fn();

describe('UserList', () => {
  it('ユーザー一覧を表示する', async () => {
    // モックのレスポンスを設定
    fetch.mockResolvedValueOnce({
      ok: true,
      json: async () => [
        { id: 1, name: '田中太郎' },
        { id: 2, name: '鈴木花子' },
      ],
    });

    render(<UserList />);

    // データの表示を待機
    expect(await screen.findByText('田中太郎')).toBeInTheDocument();
    expect(screen.getByText('鈴木花子')).toBeInTheDocument();

    // fetch が正しい URL で呼ばれたか確認
    expect(fetch).toHaveBeenCalledWith('/api/users');
  });

  it('エラー時にエラーメッセージを表示する', async () => {
    fetch.mockResolvedValueOnce({
      ok: false,
      status: 500,
    });

    render(<UserList />);

    expect(await screen.findByText(/エラー/)).toBeInTheDocument();
  });
});

it('テキストを入力できる', async () => {
  const user = userEvent.setup();
  render(<SearchBox />);

  const input = screen.getByPlaceholderText('検索...');
  await user.type(input, 'React');

  expect(input).toHaveValue('React');
});

it('ログイン済みならダッシュボードを表示する', () => {
  render(<Dashboard isLoggedIn={true} />);
  expect(screen.getByText('ダッシュボード')).toBeInTheDocument();
});

it('未ログインならログイン促進メッセージを表示する', () => {
  render(<Dashboard isLoggedIn={false} />);
  expect(screen.getByText('ログインしてください')).toBeInTheDocument();
  expect(screen.queryByText('ダッシュボード')).not.toBeInTheDocument();
});

it('フォームを送信できる', async () => {
  const handleSubmit = vi.fn();
  const user = userEvent.setup();

  render(<ContactForm onSubmit={handleSubmit} />);

  await user.type(screen.getByLabelText('名前'), '田中太郎');
  await user.type(screen.getByLabelText('メール'), '[email protected]');
  await user.click(screen.getByRole('button', { name: '送信' }));

  expect(handleSubmit).toHaveBeenCalledWith({
    name: '田中太郎',
    email: '[email protected]',
  });
});