テストパターンとユーティリティ

テスト哲学

テスト駆動開発 (TDD):

• まず失敗するテストを書く
• 最小限のコードを実装してテストを通す
• 緑になった後にリファクタリング
• 失敗するテストなしで本番コードを書かない

振る舞いベースのテスト:

• 実装ではなく振る舞いをテストする
• パブリック API とビジネス要件に焦点を当てる
• 実装の詳細をテストしない
• 振る舞いを説明する説明的なテスト名を使用する

Factory パターン:

• getMockX(overrides?: Partial<X>) 関数を作成する
• 妥当なデフォルト値を提供する
• 特定のプロパティをオーバーライド可能にする
• テストを DRY で保守性の高い状態に保つ

テストユーティリティ

カスタムレンダー関数

必要なプロバイダーでコンポーネントをラップするカスタムレンダーを作成します:

// src/utils/testUtils.tsx
import { render } from '@testing-library/react-native';
import { ThemeProvider } from './theme';

export const renderWithTheme = (ui: React.ReactElement) => {
  return render(
    <ThemeProvider>{ui}</ThemeProvider>
  );
};

使用方法:

import { renderWithTheme } from 'utils/testUtils';
import { screen } from '@testing-library/react-native';

it('should render component', () => {
  renderWithTheme(<MyComponent />);
  expect(screen.getByText('Hello')).toBeTruthy();
});

Factory パターン

コンポーネントプロップス Factory

import { ComponentProps } from 'react';

const getMockMyComponentProps = (
  overrides?: Partial<ComponentProps<typeof MyComponent>>
) => {
  return {
    title: 'Default Title',
    count: 0,
    onPress: jest.fn(),
    isLoading: false,
    ...overrides,
  };
};

// テストでの使用
it('should render with custom title', () => {
  const props = getMockMyComponentProps({ title: 'Custom Title' });
  renderWithTheme(<MyComponent {...props} />);
  expect(screen.getByText('Custom Title')).toBeTruthy();
});

データ Factory

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

const getMockUser = (overrides?: Partial<User>): User => {
  return {
    id: '123',
    name: 'John Doe',
    email: 'john@example.com',
    role: 'user',
    ...overrides,
  };
};

// 使用例
it('should display admin badge for admin users', () => {
  const user = getMockUser({ role: 'admin' });
  renderWithTheme(<UserCard user={user} />);
  expect(screen.getByText('Admin')).toBeTruthy();
});

モッキングパターン

モジュールのモッキング

// モジュール全体をモック
jest.mock('utils/analytics');

// ファクトリ関数でモック
jest.mock('utils/analytics', () => ({
  Analytics: {
    logEvent: jest.fn(),
  },
}));

// テストでモックにアクセス
const mockLogEvent = jest.requireMock('utils/analytics').Analytics.logEvent;

GraphQL フックのモッキング

jest.mock('./GetItems.generated', () => ({
  useGetItemsQuery: jest.fn(),
}));

const mockUseGetItemsQuery = jest.requireMock(
  './GetItems.generated'
).useGetItemsQuery as jest.Mock;

// テストで
mockUseGetItemsQuery.mockReturnValue({
  data: { items: [] },
  loading: false,
  error: undefined,
});

テスト構造

describe('ComponentName', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Rendering', () => {
    it('should render component with default props', () => {});
    it('should render loading state when loading', () => {});
  });

  describe('User interactions', () => {
    it('should call onPress when button is clicked', async () => {});
  });

  describe('Edge cases', () => {
    it('should handle empty data gracefully', () => {});
  });
});

クエリパターン

// 要素が存在する必要がある
expect(screen.getByText('Hello')).toBeTruthy();

// 要素は存在しないはず
expect(screen.queryByText('Goodbye')).toBeNull();

// 要素は非同期に表示される
await waitFor(() => {
  expect(screen.findByText('Loaded')).toBeTruthy();
});

ユーザーインタラクションパターン

import { fireEvent, screen } from '@testing-library/react-native';

it('should submit form on button click', async () => {
  const onSubmit = jest.fn();
  renderWithTheme(<LoginForm onSubmit={onSubmit} />);

  fireEvent.changeText(screen.getByLabelText('Email'), 'user@example.com');
  fireEvent.changeText(screen.getByLabelText('Password'), 'password123');
  fireEvent.press(screen.getByTestId('login-button'));

  await waitFor(() => {
    expect(onSubmit).toHaveBeenCalled();
  });
});

避けるべきアンチパターン

モック動作ではなく実際の動作をテストする

// 悪い - モックをテストしている
expect(mockFetchData).toHaveBeenCalled();

// 良い - 実際の動作をテストしている
expect(screen.getByText('John Doe')).toBeTruthy();

ファクトリを使用しない

// 悪い - 重複した一貫性のないテストデータ
it('test 1', () => {
  const user = { id: '1', name: 'John', email: 'john@test.com', role: 'user' };
});
it('test 2', () => {
  const user = { id: '2', name: 'Jane', email: 'jane@test.com' }; // role がない!
});

// 良い - 再利用可能なファクトリ
const user = getMockUser({ name: 'Custom Name' });

ベストプラクティス

1. 常にファクトリ関数を使用する - プロップとデータ用
2. 実装ではなく振る舞いをテストする
3. 説明的なテスト名を使用する
4. describe ブロックで整理する
5. テスト間でモックをクリアする
6. テストに集中する - テストあたり 1 つの振る舞い

テストの実行

# すべてのテストを実行
npm test

# カバレッジ付きで実行
npm run test:coverage

# 特定のファイルを実行
npm test ComponentName.test.tsx

他のスキルとの統合

• react-ui-patterns: すべての UI 状態をテスト (ローディング、エラー、空、成功)
• systematic-debugging: バグ修正前に問題を再現するテストを作成

使用時期

このスキルは、概要に記載されたワークフローまたはアクションを実行するときに適用できます。

制限事項

• このスキルは、上記で説明されたスコープと明確に一致するタスクの場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家のレビューの代わりとは見なさないでください。
• 必要な入力、権限、安全境界、または成功基準が不足している場合は停止して明確化を求めてください。