Reactテストの困りごとを解決: Vitest & Testing Libraryベストプラクティス

// ❌ これは動作しない
import { describe, it, vi } from 'vitest';
 
const mockSignIn = vi.fn();
 
vi.mock('auth-library', () => ({
  signIn: mockSignIn, // エラー: mockSignInは未定義
}));

[コード記述順]          [実際の実行順（ホイスティング後）]
1. import               1. vi.mock() ← ここでmockSignInを参照しようとしてエラー
2. const mockSignIn     2. import
3. vi.mock()            3. const mockSignIn

// ✅ vi.hoistedで正しくモック定義
import { describe, it, vi, expect } from 'vitest';
import { LoginForm } from './LoginForm';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
 
const mocks = vi.hoisted(() => ({
  auth: {
    signIn: vi.fn(),
  },
}));
 
vi.mock('auth-library', () => ({
  signIn: mocks.auth.signIn,
}));
 
describe('LoginForm', () => {
  it('ログインボタンクリックで認証関数が呼ばれる', async () => {
    const user = userEvent.setup();
    mocks.auth.signIn.mockResolvedValue({ success: true });
 
    render(<LoginForm />);
    await user.click(screen.getByRole('button', { name: 'ログイン' }));
 
    expect(mocks.auth.signIn).toHaveBeenCalled();
  });
});

const mocks = vi.hoisted(() => ({
  userService: {
    getCurrentUser: vi.fn(),
    updateProfile: vi.fn(),
  },
  analyticsService: {
    trackEvent: vi.fn(),
  },
}));
 
vi.mock('./services/user', () => mocks.userService);
vi.mock('./services/analytics', () => mocks.analyticsService);

beforeEach(() => {
  vi.clearAllMocks();
});

src/
├── services/
│   └── api.ts
├── __mocks__/
│   └── services/
│       └── api.ts  ← モック実装
└── components/
    └── UserList.test.tsx

// __mocks__/services/api.ts
export const fetchUsers = vi.fn().mockResolvedValue([
  { id: 1, name: 'テストユーザー' },
]);

// UserList.test.tsx
vi.mock('./services/api'); // __mocks__内の実装が自動的に使われる
 
it('ユーザー一覧を表示する', async () => {
  render(<UserList />);
  expect(await screen.findByText('テストユーザー')).toBeInTheDocument();
});

import { render, screen, within } from '@testing-library/react';
import { RegistrationForm } from './RegistrationForm';
 
describe('RegistrationForm', () => {
  it('フォーム要素をアクセシビリティに配慮して取得', () => {
    render(<RegistrationForm />);
 
    // Role + accessible name で特定
    const emailInput = screen.getByRole('textbox', { name: 'メールアドレス' });
    const submitButton = screen.getByRole('button', { name: '登録する' });
 
    expect(emailInput).toBeInTheDocument();
    expect(submitButton).toBeInTheDocument();
  });
 
  it('within()でスコープを限定', () => {
    render(<RegistrationForm />);
 
    // 特定のセクション内に検索範囲を限定
    const personalSection = screen.getByRole('region', { name: '個人情報' });
    const nameInput = within(personalSection).getByRole('textbox', { name: '氏名' });
 
    expect(nameInput).toBeInTheDocument();
  });
});

it('エラーメッセージが初期状態で非表示', () => {
  render(<RegistrationForm />);
 
  // queryByは見つからない場合nullを返す（エラーにならない）
  expect(screen.queryByRole('alert')).not.toBeInTheDocument();
});

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
 
describe('LoginForm', () => {
  it('ログインボタンをクリックするとsignInが呼ばれる', async () => {
    // ✅ render前にsetup
    const user = userEvent.setup();
 
    render(<LoginForm />);
 
    await user.click(screen.getByRole('button', { name: 'ログイン' }));
 
    expect(mockSignIn).toHaveBeenCalledWith('auth0');
  });
});

describe('FilterSection', () => {
  const user = userEvent.setup();
  const mockOnFilterChange = vi.fn();
 
  beforeEach(() => {
    vi.clearAllMocks();
  });
 
  it('絞り込みボタンをクリックできる', async () => {
    render(<FilterSection onFilterChange={mockOnFilterChange} />);
 
    await user.click(screen.getByRole('button', { name: '絞り込む' }));
 
    expect(mockOnFilterChange).toHaveBeenCalled();
  });
});

// ボタンのクリック
await user.click(screen.getByRole('button', { name: '送信' }));
 
// チェックボックスの操作
await user.click(screen.getByLabelText('利用規約に同意する'));
 
// セレクトボックス（UIライブラリの場合）
const roleSelect = screen.getByLabelText('ロール');
await user.click(roleSelect); // セレクトを開く
await user.click(screen.getByTitle('管理者')); // オプションを選択

// テキスト入力
await user.type(screen.getByLabelText('名前'), 'テストユーザー');
await user.type(screen.getByLabelText('メールアドレス'), 'test@example.com');
 
// パスワード入力
await user.type(screen.getByLabelText('パスワード'), 'SecurePass123!');
 
// textarea入力
const textarea = screen.getByPlaceholderText('備考を入力してください');
await user.type(textarea, '新しい備考内容');

const input = screen.getByLabelText('名前');
await user.type(input, '初期値');
 
// 入力値をクリアしてから新しい値を入力
await user.clear(input);
await user.type(input, '新しい値');

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
 
describe('FileUploader', () => {
  it('ファイルをアップロードできる', async () => {
    const user = userEvent.setup();
    const mockOnUpload = vi.fn();
 
    render(<FileUploader onUpload={mockOnUpload} />);
 
    // Fileオブジェクトを作成
    const file = new File(
      ['{"type":"FeatureCollection","features":[]}'],
      'data.geojson',
      { type: 'application/json' }
    );
 
    // input[type="file"]を取得
    const input = screen.getByLabelText('ファイルを選択');
 
    // ファイルをアップロード
    await user.upload(input, file);
 
    // UIにファイル名が表示されることを確認
    await waitFor(() => {
      expect(screen.getByText('data.geojson')).toBeInTheDocument();
    });
  });
});

it('無効なメールアドレスでエラーが表示される', async () => {
  const user = userEvent.setup();
  render(<RegistrationForm />);
 
  const emailInput = screen.getByLabelText('メールアドレス');
  await user.type(emailInput, 'invalid-email');
 
  // フォーカスを外してバリデーションをトリガー
  await user.tab();
 
  // エラーメッセージが表示されることを確認
  expect(screen.getByText('有効なメールアドレスを入力してください')).toBeInTheDocument();
});

it('長文をペーストできる', async () => {
  const user = userEvent.setup();
  render(<TextEditor />);
 
  const textarea = screen.getByRole('textbox');
 
  // 5000文字のテキストをペースト
  const longText = 'あ'.repeat(5000);
  await user.paste(longText);
 
  expect(textarea).toHaveValue(longText);
});

describe('FileUploader', () => {
  it('ファイル選択後にファイル名が表示される', async () => {
    const user = userEvent.setup();
    render(<FileUploader onUpload={vi.fn()} />);
 
    const file = new File(['content'], 'document.pdf', { type: 'application/pdf' });
    const input = screen.getByLabelText('ファイルを選択');
 
    await user.upload(input, file);
 
    // waitForで非同期更新の完了を待機
    await waitFor(() => {
      expect(screen.getByText('document.pdf')).toBeInTheDocument();
    });
  });
 
  it('findByで要素の出現を待機', async () => {
    const user = userEvent.setup();
    render(<FileUploader onUpload={vi.fn()} />);
 
    await user.click(screen.getByRole('button', { name: 'アップロード' }));
 
    // findBy = waitFor + getBy のショートカット
    const successMessage = await screen.findByRole('alert');
    expect(successMessage).toHaveTextContent('アップロード完了');
  });
});

// findBy: 単一要素の出現を待つ
const element = await screen.findByRole('button', { name: '送信' });
 
// waitFor: 複雑な条件を待つ
await waitFor(() => {
  expect(mockCallback).toHaveBeenCalledTimes(2);
  expect(screen.getByText('完了')).toBeInTheDocument();
});

// test-utils.tsx
import { render as originalRender, RenderOptions } from '@testing-library/react';
import { ThemeProvider } from './contexts/ThemeContext';
import { AuthProvider } from './contexts/AuthContext';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React, { ReactElement } from 'react';
 
// テスト用のQueryClientを作成
const createTestQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: { retry: false },
      mutations: { retry: false },
    },
  });
 
// カスタムrender関数
export const render = (
  ui: ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>
) => {
  const queryClient = createTestQueryClient();
 
  return originalRender(ui, {
    ...options,
    wrapper: ({ children }) => (
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <ThemeProvider>
            {children}
          </ThemeProvider>
        </AuthProvider>
      </QueryClientProvider>
    ),
  });
};
 
// testing-libraryの全エクスポートを再エクスポート
export * from '@testing-library/react';

// テストファイル
import { render, screen } from './test-utils'; // カスタムtest-utilsからインポート
import { Dashboard } from './Dashboard';
 
describe('Dashboard', () => {
  it('必要なProviderがラップされた状態でレンダリング', () => {
    render(<Dashboard />);
 
    // Providerを意識せずにテスト可能
    expect(screen.getByRole('heading', { name: 'ダッシュボード' })).toBeInTheDocument();
  });
});

// エラー: Unable to find an element with the role "button" and name "送信"
 
// デバッグ: 利用可能なroleを確認
screen.debug(); // DOM全体を出力
 
// Testing Playgroundで確認
screen.logTestingPlaygroundURL(); // ブラウザで開けるURLを出力

// タイムアウトを延長する
await waitFor(
  () => {
    expect(screen.getByText('完了')).toBeInTheDocument();
  },
  { timeout: 5000 } // デフォルト1000msを延長
);

// 各テスト前にモックをリセット
beforeEach(() => {
  vi.clearAllMocks(); // 呼び出し履歴をクリア
  // vi.resetAllMocks(); // 実装もリセットする場合
});
 
// 特定のモックのみリセット
afterEach(() => {
  mocks.userService.getCurrentUser.mockReset();
});