フロントエンドテスト×AI：Jest・Testing Library・Playwrightの自動生成

テストフレームワーク比較

AIによるテストコード自動生成

// AIが生成するTesting Libraryのテスト例
// 「LoginFormコンポーネントの完全なテストを書いて」と指示

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { LoginForm } from "./LoginForm";

describe("LoginForm", () => {
  const mockOnSubmit = vi.fn();
  const user = userEvent.setup();

  beforeEach(() => {
    mockOnSubmit.mockClear();
  });

  // 正常系テスト
  it("正しい入力でフォーム送信できる", async () => {
    render(<LoginForm onSubmit={mockOnSubmit} />);

    await user.type(screen.getByLabelText("メールアドレス"), "test@example.com");
    await user.type(screen.getByLabelText("パスワード"), "password123");
    await user.click(screen.getByRole("button", { name: "ログイン" }));

    await waitFor(() => {
      expect(mockOnSubmit).toHaveBeenCalledWith({
        email: "test@example.com",
        password: "password123",
      });
    });
  });

  // 異常系テスト
  it("メールアドレスが空の場合エラーを表示", async () => {
    render(<LoginForm onSubmit={mockOnSubmit} />);
    await user.click(screen.getByRole("button", { name: "ログイン" }));
    expect(screen.getByText("メールアドレスは必須です")).toBeInTheDocument();
    expect(mockOnSubmit).not.toHaveBeenCalled();
  });

  // エッジケーステスト
  it("送信中はボタンが無効化される", async () => {
    mockOnSubmit.mockImplementation(
      () => new Promise((resolve) => setTimeout(resolve, 1000))
    );
    render(<LoginForm onSubmit={mockOnSubmit} />);
    await user.type(screen.getByLabelText("メールアドレス"), "test@example.com");
    await user.type(screen.getByLabelText("パスワード"), "password123");
    await user.click(screen.getByRole("button", { name: "ログイン" }));
    expect(screen.getByRole("button")).toBeDisabled();
  });
});

E2Eテストの自動生成（Playwright）

テスト戦略とテストピラミッド

まとめとして、フロントエンドのテストはAIの自動生成により、最も効率化できる開発工程の一つです。手作業でテストを書く面倒さがなくなり、正常系・異常系・エッジケースを網羅した品質の高いテストを短時間で作成できます。Vitest + Testing Library + Playwrightの組み合わせがモダンなテスト構成の標準で、AIはこの構成でのテスト生成精度が非常に高いです。テストピラミッドを意識した適切なレイヤー配分もAIが提案してくれるので、まずは既存のコンポーネントに対して「テストを書いて」とAIに指示することから始めてみてください。テストカバレッジが一気に向上し、リファクタリングへの自信が生まれるはずです。

関連記事

• テスト駆動開発（TDD）×AI：テストファーストをAIで加速
• コード品質管理×AI：ESLint・SonarQube・カスタムルール自動化
• React開発×AIコーディング：コンポーネント設計から最適化まで