Reviewing Testability

テスタビリティレビュー - テストしやすいコード設計

目標: 複雑なモッキングやセットアップなしでテストしやすいコード。

テスタビリティ指標

セクションベースのロード

クイックチェックリスト

アーキテクチャ

• 依存関係が注入可能（ハードコードインポートでない）
• 純粋コードと不純コードの明確な分離
• 外部サービス用のインターフェース定義

コンポーネント

• Presentationalコンポーネントが純粋（props in, JSX out）
• イベントハンドラーがテスト用に抽出可能
• 副作用がhooks/containersに分離

状態管理

• グローバルなミュータブル状態なし
• 状態更新が予測可能（reducers、純粋関数）
• テスト用に状態を簡単に初期化可能

主要原則

一般的なパターン

依存性注入

// Bad: テスト困難: 直接依存
class UserService {
  async getUser(id: string) {
    return fetch(`/api/users/${id}`).then(r => r.json())
  }
}

// Good: テスト可能: 注入可能な依存関係
interface HttpClient {
  get<T>(url: string): Promise<T>
}

class UserService {
  constructor(private http: HttpClient) {}
  async getUser(id: string) {
    return this.http.get<User>(`/api/users/${id}`)
  }
}

純粋関数

// Bad: テスト困難: 副作用がロジックと混在
function calculateDiscount(userId: string) {
  const history = api.getPurchaseHistory(userId) // 副作用
  return history.length > 10 ? 0.2 : 0.1
}

// Good: テストしやすい: 純粋関数
function calculateDiscount(purchaseCount: number): number {
  return purchaseCount > 10 ? 0.2 : 0.1
}

Presentationalコンポーネント

// Bad: テスト困難: 内部状態とeffect
function SearchBox() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  useEffect(() => { api.search(query).then(setResults) }, [query])
  return <div>...</div>
}

// Good: テストしやすい: 制御されたコンポーネント
interface SearchBoxProps {
  query: string
  results: SearchResult[]
  onQueryChange: (query: string) => void
}

function SearchBox({ query, results, onQueryChange }: SearchBoxProps) {
  return (
    <div>
      <input value={query} => onQueryChange(e.target.value)} />
      <ul>{results.map(r => <li key={r.id}>{r.name}</li>)}</ul>
    </div>
  )
}

参照

コア原則

• @~/.claude/skills/applying-code-principles/SKILL.md - 依存性逆転の原則
• @~/.claude/skills/applying-code-principles/SKILL.md - テスト困難ならシンプルに

関連スキル

• generating-tdd-tests - TDDプロセスとテスト生成
• reviewing-type-safety - 型がテスタビリティを向上

使用エージェント

• testability-reviewer - このスキルの主要な使用者