测试驱动开发工作流¶

此技能确保所有代码开发都遵循 TDD 原则，并具备全面的测试覆盖率。

启用时机¶

创建新功能或功能
修复 bug 或问题
重构现有代码
添加 API 端点
创建新组件

核心原则¶

1. 先写测试再写代码¶

始终先编写测试，然后实现使测试通过的代码。

2. 覆盖率要求¶

最低 80% 覆盖率（单元测试 + 集成测试 + E2E）
覆盖所有边缘情况
测试错误场景
验证边界条件

3. 测试类型¶

单元测试¶

单个函数和工具
组件逻辑
纯函数
辅助函数和工具

集成测试¶

API 端点
数据库操作
服务间交互
外部 API 调用

E2E 测试 (Playwright)¶

关键用户流程
完整工作流
浏览器自动化
UI 交互

TDD 工作流步骤¶

步骤 1：编写用户旅程¶

[役割]として、[行動]をしたい、それによって[利益]を得られるようにするため

例：
ユーザーとして、セマンティックに市場を検索したい、
それによって正確なキーワードなしでも関連する市場を見つけられるようにするため。

步骤 2：生成测试用例¶

为每个用户旅程创建全面的测试用例：

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：运行测试（应该会失败）¶

npm test
# テストは失敗するはず - まだ実装していない

步骤 4：实现代码¶

编写使测试通过的最小代码：

// テストにガイドされた実装
export async function searchMarkets(query: string) {
  // 実装はここ
}

步骤 5：重新运行测试¶

npm test
# テストは今度は成功するはず

步骤 6：重构¶

在保持测试通过的同时提升代码质量：

消除重复
改善命名
优化性能
提高可读性

步骤 7：检查覆盖率¶

npm run test:coverage
# 80%以上のカバレッジを達成したことを確認

测试模式¶

单元测试模式 (Jest/Vitest)¶

import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from './Button'

describe('Button Component', () => {
  it('renders with correct text', () => {
    render(<Button>Click me</Button>)
    expect(screen.getByText('Click me')).toBeInTheDocument()
  })

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn()
    render(<Button onClick={handleClick}>Click</Button>)

    fireEvent.click(screen.getByRole('button'))

    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click</Button>)
    expect(screen.getByRole('button')).toBeDisabled()
  })
})

API 集成测试模式¶

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)¶

import { test, expect } from '@playwright/test'

test('user can search and filter markets', async ({ page }) => {
  // 市場ページに移動
  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 模拟¶

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 模拟¶

jest.mock('@/lib/redis', () => ({
  searchMarketsByVector: jest.fn(() => Promise.resolve([
    { slug: 'test-market', similarity_score: 0.95 }
  ])),
  checkRedisHealth: jest.fn(() => Promise.resolve({ connected: true }))
}))

OpenAI 模拟¶

jest.mock('@/lib/openai', () => ({
  generateEmbedding: jest.fn(() => Promise.resolve(
    new Array(1536).fill(0.1) // 1536次元埋め込みをモック
  ))
}))

测试覆盖率验证¶

运行覆盖率报告¶

npm run test:coverage

覆盖率阈值¶

{
  "jest": {
    "coverageThresholds": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": 80
      }
    }
  }
}

应避免的常见测试错误¶

FAIL: 错误：测试实现细节¶

// 内部状態をテストしない
expect(component.state.count).toBe(5)

PASS: 正确：测试用户可见行为¶

// ユーザーが見るものをテスト
expect(screen.getByText('Count: 5')).toBeInTheDocument()

FAIL: 错误：脆弱的选择器¶

// 簡単に壊れる
await page.click('.css-class-xyz')

PASS: 正确：语义化选择器¶

// 変更に強い
await page.click('button:has-text("Submit")')
await page.click('[data-testid="submit-button"]')

FAIL: 错误：测试未隔离¶

// テストが互いに依存
test('creates user', () => { /* ... */ })
test('updates same user', () => { /* 前のテストに依存 */ })

PASS: 正确：独立测试¶

// 各テストが独自のデータをセットアップ
test('creates user', () => {
  const user = createTestUser()
  // テストロジック
})

test('updates user', () => {
  const user = createTestUser()
  // 更新ロジック
})

持续测试¶

开发中的监听模式¶

npm test -- --watch
# ファイル変更時に自動的にテストが実行される

提交前钩子¶

# すべてのコミット前に実行
npm test && npm run lint

CI/CD 集成¶

# GitHub Actions
- name: Run Tests
  run: npm test -- --coverage
- name: Upload Coverage
  uses: codecov/codecov-action@v3

最佳实践¶

先写测试 - 始终采用 TDD
每个测试一个断言 - 聚焦单一行为
描述性测试名称 - 说明测试内容
Arrange-Act-Assert - 清晰的测试结构
模拟外部依赖 - 隔离单元测试
测试边界情况 - null、undefined、空值、大值
测试错误路径 - 不仅测试正常路径
保持测试快速 - 每个单元测试低于 50ms
测试后清理 - 无副作用
审查覆盖率报告 - 识别覆盖缺口

成功指标¶

实现 80% 以上的代码覆盖率
所有测试通过（绿色）
没有跳过或禁用的测试
快速测试执行（单元测试少于 30 秒）
E2E 测试覆盖关键用户流程
测试在生产前发现缺陷

请记住：测试不是可选项。测试是让你能够自信地重构、快速开发并保障生产可靠性的安全网。

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 ev/ECC