フロントエンドテスト

目次

• 概要
• 使用時期
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

ユニットテスト、統合テスト、エンドツーエンドテストを含む、フロントエンドアプリケーション向けの包括的なテストスイートを構築します。適切なカバレッジとアサーションを備えています。

使用時期

• コンポーネントテスト
• 統合テスト
• エンドツーエンドテスト
• リグレッション防止
• 品質保証
• テスト駆動開発

クイックスタート

最小限の動作例:

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

describe('Button Component', () => {
  it('renders button with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button')).toHaveTextContent('Click me');
  });

  it('calls onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click</Button>);

    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('disables button when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });

  it('applies variant styles correctly', () => {
// ... (詳細な実装はリファレンスガイドを参照してください)

リファレンスガイド

references/ ディレクトリに詳細な実装があります:

ベストプラクティス

✅ すべきこと

• 確立されたパターンと規約に従う
• クリーンで保守しやすいコードを書く
• 適切なドキュメントを追加する
• デプロイ前に十分にテストする

❌ すべきでないこと

• テストまたは検証をスキップする
• エラーハンドリングを無視する
• 設定値をハードコードする