# Tdd Workflow Typescript > 新機能の記述、バグ修正、またはコードのリファクタリング時にこのスキルを使用します。Jest/Vitest、React Testing Library、Playwright を使用して、ユニット、統合、E2Eテストを含む80%以上のカバレッジでテスト駆動開発を強制します。 Use when this capability is needed. - Skill: `tomevault-io/tdd-workflow-typescript` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/tdd-workflow-typescript` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tdd-workflow-typescript/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/tdd-workflow-typescript --- # テスト駆動開発ワークフロー このスキルは、すべてのコード開発が包括的なテストカバレッジを伴うTDD原則に従うことを保証します。 ## いつアクティブ化するか - 新機能または機能を書くとき - バグや問題を修正するとき - 既存のコードをリファクタリングするとき - APIエンドポイントを追加するとき - 新しいコンポーネントを作成するとき ## 中核原則 ### 1. コードの前にテスト 常にテストを最初に書き、次にテストをパスするコードを実装します。 ### 2. カバレッジ要件 - 最小80%カバレッジ (ユニット + 統合 + E2E) - すべてのエッジケースがカバーされている - エラーシナリオがテストされている - 境界条件が検証されている ### 3. テストタイプ #### ユニットテスト - 個別の関数とユーティリティ - コンポーネントロジック - 純粋関数 - ヘルパーとユーティリティ #### 統合テスト - APIエンドポイント - データベース操作 - サービス間相互作用 - 外部API呼び出し #### E2Eテスト (Playwright) - 重要なユーザーフロー - 完全なワークフロー - ブラウザ自動化 - UI相互作用 ## TDDワークフローステップ ### ステップ1: ユーザージャーニーを書く ``` [ロール]として、[アクション]したい、[利益]のために 例: ユーザーとして、市場を意味的に検索したい、 正確なキーワードなしでも関連する市場を見つけられるように。 ``` ### ステップ2: テストケースを生成 各ユーザージャーニーに対して、包括的なテストケースを作成: ```typescript describe('Semantic Search', () => { it('returns relevant markets for query', async () => { // テスト実装 }) it('handles empty query gracefully', async () => { // エッジケースをテスト }) it('falls back to substring search when Redis unavailable', async () => { // フォールバック動作をテスト }) it('sorts results by similarity score', async () => { // ソートロジックをテスト }) }) ``` ### ステップ3: テストを実行 (失敗するはず) ```bash npm test # テストは失敗するはず - まだ実装していない ``` ### ステップ4: コードを実装 テストをパスするための最小限のコードを書く: ```typescript // テストに導かれた実装 export async function searchMarkets(query: string) { // ここに実装 } ``` ### ステップ5: 再度テストを実行 ```bash npm test # テストは今パスするはず ``` ### ステップ6: リファクタリング テストをグリーンに保ちながらコード品質を改善: - 重複を削除 - 命名を改善 - パフォーマンスを最適化 - 可読性を向上 ### ステップ7: カバレッジを検証 ```bash npm run test:coverage # 80%以上のカバレッジが達成されたことを確認 ``` ## テストパターン ### ユニットテストパターン (Jest/Vitest) ```typescript import { render, screen, fireEvent } from '@testing-library/react' import { Button } from './Button' describe('Button Component', () => { it('renders with correct text', () => { render() expect(screen.getByText('Click me')).toBeInTheDocument() }) it('calls onClick when clicked', () => { const handleClick = jest.fn() render() fireEvent.click(screen.getByRole('button')) expect(handleClick).toHaveBeenCalledTimes(1) }) it('is disabled when disabled prop is true', () => { render() expect(screen.getByRole('button')).toBeDisabled() }) }) ``` ### API統合テストパターン ```typescript import { NextRequest } from 'next/server' import { GET } from './route' describe('GET /api/markets', () => { it('returns markets successfully', async () => { const request = new NextRequest('http://localhost/api/markets') const response = await GET(request) const data = await response.json() expect(response.status).toBe(200) expect(data.success).toBe(true) expect(Array.isArray(data.data)).toBe(true) }) it('validates query parameters', async () => { const request = new NextRequest('http://localhost/api/markets?limit=invalid') const response = await GET(request) expect(response.status).toBe(400) }) it('handles database errors gracefully', async () => { // データベース障害をモック const request = new NextRequest('http://localhost/api/markets') // エラー処理をテスト }) }) ``` ### E2Eテストパターン (Playwright) ```typescript import { test, expect } from '@playwright/test' test('user can search and filter markets', async ({ page }) => { // marketsページに移動 await page.goto('/') await page.click('a[href="/markets"]') // ページが読み込まれたことを確認 await expect(page.locator('h1')).toContainText('Markets') // 市場を検索 await page.fill('input[placeholder="Search markets"]', 'election') // デバウンスと結果を待つ await page.waitForTimeout(600) // 検索結果が表示されたことを確認 const results = page.locator('[data-testid="market-card"]') await expect(results).toHaveCount(5, { timeout: 5000 }) // 結果に検索語が含まれることを確認 const firstResult = results.first() await expect(firstResult).toContainText('election', { ignoreCase: true }) // ステータスでフィルター await page.click('button:has-text("Active")') // フィルターされた結果を確認 await expect(results).toHaveCount(3) }) test('user can create a new market', async ({ page }) => { // 最初にログイン await page.goto('/creator-dashboard') // 市場作成フォームを入力 await page.fill('input[name="name"]', 'Test Market') await page.fill('textarea[name="description"]', 'Test description') await page.fill('input[name="endDate"]', '2025-12-31') // フォームを送信 await page.click('button[type="submit"]') // 成功メッセージを確認 await expect(page.locator('text=Market created successfully')).toBeVisible() // 市場ページへのリダイレクトを確認 await expect(page).toHaveURL(/\/markets\/test-market/) }) ``` ## テストファイル構成 ``` src/ ├── components/ │ ├── Button/ │ │ ├── Button.tsx │ │ ├── Button.test.tsx # ユニットテスト │ │ └── Button.stories.tsx # Storybook │ └── MarketCard/ │ ├── MarketCard.tsx │ └── MarketCard.test.tsx ├── app/ │ └── api/ │ └── markets/ │ ├── route.ts │ └── route.test.ts # 統合テスト └── e2e/ ├── markets.spec.ts # E2Eテスト ├── trading.spec.ts └── auth.spec.ts ``` ## 外部サービスのモック ### Supabaseモック ```typescript jest.mock('@/lib/supabase', () => ({ supabase: { from: jest.fn(() => ({ select: jest.fn(() => ({ eq: jest.fn(() => Promise.resolve({ data: [{ id: 1, name: 'Test Market' }], error: null })) })) })) } })) ``` ### Redisモック ```typescript jest.mock('@/lib/redis', () => ({ searchMarketsByVector: jest.fn(() => Promise.resolve([ { slug: 'test-market', similarity_score: 0.95 } ])), checkRedisHealth: jest.fn(() => Promise.resolve({ connected: true })) })) ``` ### OpenAIモック ```typescript jest.mock('@/lib/openai', () => ({ generateEmbedding: jest.fn(() => Promise.resolve( new Array(1536).fill(0.1) // 1536次元埋め込みをモック )) })) ``` ## テストカバレッジ検証 ### カバレッジレポートを実行 ```bash npm run test:coverage ``` ### カバレッジしきい値 ```json { "jest": { "coverageThresholds": { "global": { "branches": 80, "functions": 80, "lines": 80, "statements": 80 } } } } ``` ## 避けるべき一般的なテストミス ### ❌ 間違い: 実装詳細のテスト ```typescript // 内部状態をテストしない expect(component.state.count).toBe(5) ``` ### ✅ 正しい: ユーザーに見える動作をテスト ```typescript // ユーザーが見るものをテスト expect(screen.getByText('Count: 5')).toBeInTheDocument() ``` ### ❌ 間違い: 脆弱なセレクタ ```typescript // 簡単に壊れる await page.click('.css-class-xyz') ``` ### ✅ 正しい: セマンティックセレクタ ```typescript // 変更に強い await page.click('button:has-text("Submit")') await page.click('[data-testid="submit-button"]') ``` ### ❌ 間違い: テスト分離なし ```typescript // テストが互いに依存 test('creates user', () => { /* ... */ }) test('updates same user', () => { /* 前のテストに依存 */ }) ``` ### ✅ 正しい: 独立したテスト ```typescript // 各テストが独自のデータをセットアップ test('creates user', () => { const user = createTestUser() // テストロジック }) test('updates user', () => { const user = createTestUser() // 更新ロジック }) ``` ## 継続的テスト ### 開発中のウォッチモード ```bash npm test -- --watch # ファイル変更時に自動的にテストを実行 ``` ### プレコミットフック ```bash # コミットごとに実行 npm test && npm run lint ``` ### CI/CD統合 ```yaml # GitHub Actions - name: Run Tests run: npm test -- --coverage - name: Upload Coverage uses: codecov/codecov-action@v3 ``` ## ベストプラクティス 1. **最初にテストを書く** - 常にTDD 2. **テストごとに1つのアサート** - 単一の動作に焦点を当てる 3. **説明的なテスト名** - テストされていることを説明する 4. **Arrange-Act-Assert** - 明確なテスト構造 5. **外部依存関係をモック** - ユニットテストを分離 6. **エッジケースをテスト** - Null、undefined、空、大きい 7. **エラーパスをテスト** - ハッピーパスだけではない 8. **テストを高速に保つ** - ユニットテストは各50ms未満 9. **テスト後のクリーンアップ** - 副作用なし 10. **カバレッジレポートをレビュー** - ギャップを特定 ## 成功メトリクス - 80%以上のコードカバレッジ達成 - すべてのテストがパス (グリーン) - スキップまたは無効化されたテストなし - 高速なテスト実行 (ユニットテストで30秒未満) - E2Eテストが重要なユーザーフローをカバー - テストが本番前にバグをキャッチ --- **覚えておくこと**: テストはオプションではありません。自信を持ったリファクタリング、迅速な開発、本番環境の信頼性を可能にする安全網です。 --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/rx-k8) — claim your Tome and manage your conversions.