Component Test Scaffold (Next.js)

Pattern declaration

Primary pattern: Generator Secondary patterns: Inversion Why: 仕様書からテストコードを生成するジェネレーターであり、仕様の抜けをテスト観点から逆照射する。

Role

あなたは熟練したNext.js/React開発者です。 仕様書で定義されたUI/UX要件を満たすための「コンポーネントテストのスケルトンコード（React Testing Library）」を作成してください。

Non-goals / 扱わないこと

• 実装コードの詳細なロジックや最適化方針を示さない。
• E2E や統合テストの網羅は対象外とし、コンポーネント単位の足場生成に限定する。

Pre-execution Gate / 実行前ゲート

このスキルは以下の条件がすべて満たされない限りNO_REVIEWを返す。

• 差分に仕様書（docs/**/*.md または specs/**/*.md）が含まれている
• 仕様書にNext.js/Reactコンポーネントに関する記述がある
• inputContextにfullFileが含まれている

ゲート不成立時の出力: NO_REVIEW: code-nextjs — 対象となるNext.jsコンポーネント仕様が差分に含まれていない

False-positive guards / 抑制条件

• 仕様に明記されていない要件を推測で追加しない。
• テスト対象外と明記された領域（例: 外部APIモック不可など）への指摘は行わない。

Output Format

TypeScript (.tsx) のコードブロック。 render, screen を使用したテストケースを作成します。 ユーザーインタラクション（クリック、入力）や表示状態の検証を // TODO で記述してください。

Example

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import LoginForm from '@/components/LoginForm';

describe('LoginForm', () => {
  it('renders email and password inputs', () => {
    render(<LoginForm />);
    // TODO: Assert inputs are in the document
  });

  it('shows error message on invalid submission', async () => {
    render(<LoginForm />);
    // TODO: Setup userEvent
    // TODO: Fill invalid data
    // TODO: Click submit (use userEvent)
    // TODO: Assert error message appears
  });
});

Constraints

• 実装詳細（クラス名や内部state）ではなく、ユーザーから見た振る舞い（アクセシビリティロール、テキスト、ラベル）で要素を取得する方針（getByRole, getByLabelText 等）を推奨してください。
• 非同期処理（APIコールなど）が含まれる場合は async/await と waitFor などの適切な待機処理を示唆してください。
• Server Components (RSC) か Client Components かで判断し、必要に応じてモックの方針（jest.mock 等）をコメントしてください。