frontend-testing

フロントエンドテスト

目次

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

概要

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

使用する場面

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

クイックスタート

最小限の動作例：

// 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', () => {
// ... (see reference guides for full implementation)

リファレンスガイド

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

ガイド	内容
Jest Unit Testing (React)	Jest Unit Testing (React)
React Testing Library Integration Tests	React Testing Library Integration Tests
Vitest for Vue Testing	Vitest for Vue Testing
Cypress E2E Testing	Cypress E2E Testing
Test Coverage Configuration	Test Coverage Configuration

ベストプラクティス

✅ 推奨事項

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

❌ 避けるべき事項

• テストや検証を省略します
• エラー処理を無視します
• 設定値をハードコードします