tdd-workflow

name	tdd-workflow
description	React 19 + TypeScript + Vite SPA向けTDDワークフロー。Vitestによるユニット/コンポーネントテスト、PlaywrightによるE2Eテスト。

テスト駆動開発ワークフロー

注意: 現在テストフレームワーク未導入。初回使用時はセットアップから開始。

セットアップ

# Vitest + React Testing Library
pnpm add -D vitest @testing-library/react @testing-library/jest-dom jsdom

# Playwright（E2E）
pnpm add -D @playwright/test
npx playwright install

コア原則

1. コードの前にテスト

常にテストを最初に書き、次にテストを通すコードを実装する。

2. テストタイプ

ユニットテスト（Vitest）

• 個々の関数とユーティリティ
• 純粋関数、ヘルパー

コンポーネントテスト（Vitest + React Testing Library）

• Reactコンポーネントのレンダリング
• ユーザーインタラクション

E2Eテスト（Playwright）

• D-padナビゲーションフロー
• メニュー切り替え
• レスポンシブ表示

TDDワークフローステップ

ステップ1: テストケースを生成

import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'

describe('Content', () => {
  it('Account選択時にProfile表示', () => {
    render(<Content activeMenuIndex= = />)
    (screen.()).()
  })

  (,  {
    ()
    
  })
})