mcpField
W
writing-tests

writing-tests

github.com/augmntテスト・品質249 回インストール40 週間前に更新
リポジトリ

writing-tests について

writing-testsは、リスクに応じたテスト種別の選択と、ユーザーに見える振る舞いを中心としたテスト設計を支援する開発者向けスキルです。クエリやテスト構成の指針に加え、モックやカバレッジの資料も案内します。

主な機能

  1. 01リスクに基づくテストの優先順位付け
  2. 02ユニット・統合・E2Eテストの指針
  3. 03Arrange-Act-Assertパターン
  4. 04アクセシブルなクエリの選択
  5. 05コンポーネントとテストの同じ場所への配置
  6. 06最小限のテスト方針

活用シーン

  1. 01機能に適したテスト種別の選択
  2. 02認証や決済フローの優先的なテスト
  3. 03UIコンポーネントの振る舞いの検証
  4. 04時間が限られる場合のテスト計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/augmnt/webdev-skills --skill writing-tests

インストール後、Claude Code で/writing-testsを入力して読み込まれたか確認します。

同梱ファイルMOCKING.md

詳細

テストの作成

実装ではなく、動作をテストします。リスクに応じて優先順位を付けます。

テストの種類の使い分け

種類対象使用する場面ツール
ユニット単一の関数／フック純粋なロジック、計算Vitest、Jest
インテグレーションコンポーネント＋依存関係フォーム、データ表示Testing Library
E2Eユーザーフロー全体重要な経路Playwright

必ずテストする項目

  • 認証フロー
  • 支払い／チェックアウト
  • データの変更（作成、更新、削除）
  • 認可ルール
  • 重要なビジネスロジック

テストの優先度が低い項目

  • 静的コンテンツ
  • サードパーティの内部実装
  • 純粋なスタイル

ファイル構成

src/components/Button/
├── Button.tsx
└── Button.test.tsx      # Colocated

e2e/                     # E2E at root
├── auth.spec.ts
└── checkout.spec.ts

パターン

Arrange-Act-Assert
test('increments on click', () => {
  // Arrange
  render(<Counter initial={0} />)
  // Act
  fireEvent.click(screen.getByRole('button'))
  // Assert
  expect(screen.getByText('1')).toBeInTheDocument()
})
クエリの優先順位（最良 → 最低）
  1. getByRole - セマンティックで、アクセシブル
  2. getByLabelText - フォーム入力
  3. getByText - コンテンツ
  4. getByTestId - 最終手段
実装ではなく、動作をテストする
// ❌ Implementation
expect(component.state.isOpen).toBe(true)

// ✅ Behavior
expect(screen.getByRole('dialog')).toBeVisible()

最低限のテスト

時間が限られている場合：

  1. 正常系のE2Eテスト（大部分をカバー）
  2. 複雑なロジックのユニットテスト（エッジケースを検出）
  3. 重要なコンポーネント（フォーム、データ）のインテグレーションテスト

高度なパターン

APIのモック、テストフィクスチャ、カバレッジの指針については、MOCKING.mdを参照してください。

コメント

Markdown 対応