designing-tests
Designs and implements testing strategies for any codebase. Use when adding tests, improving coverage, setting up testing infrastructure, debugging test failures, or when asked about unit tests, integration tests, or E2E testing.
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o designing-tests.zip https://jpskill.com/download/17944.zip && unzip -o designing-tests.zip && rm designing-tests.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17944.zip -OutFile "$d\designing-tests.zip"; Expand-Archive "$d\designing-tests.zip" -DestinationPath $d -Force; ri "$d\designing-tests.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
designing-tests.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
designing-testsフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
テストの設計
テスト実装のワークフロー
このチェックリストをコピーして、進捗状況を追跡してください。
テスト実装の進捗状況:
- [ ] ステップ 1: テスト対象の特定
- [ ] ステップ 2: 適切なテストタイプの選択
- [ ] ステップ 3: テンプレートに従ったテストの作成
- [ ] ステップ 4: テストの実行と合格の検証
- [ ] ステップ 5: カバレッジが目標を満たしているかの確認
- [ ] ステップ 6: 失敗したテストの修正
テストピラミッド
バランスの取れたカバレッジのために、テストピラミッドを適用してください。
/\
/ \ E2E Tests (10%)
/----\ - 重要なユーザーの行動
/ \ - 低速だが包括的
/--------\ Integration Tests (20%)
/ \ - コンポーネント間の相互作用
/------------\ - API の契約
/ \ Unit Tests (70%)
/________________\ - 高速、隔離されている
- ビジネスロジックに焦点を当てる
フレームワークの選択
JavaScript/TypeScript
| タイプ | 推奨 | 代替 |
|---|---|---|
| Unit | Vitest | Jest |
| Integration | Vitest + MSW | Jest + SuperTest |
| E2E | Playwright | Cypress |
| Component | Testing Library | Enzyme |
Python
| タイプ | 推奨 | 代替 |
|---|---|---|
| Unit | pytest | unittest |
| Integration | pytest + httpx | pytest + requests |
| E2E | Playwright | Selenium |
| API | pytest + FastAPI TestClient | - |
Go
| タイプ | 推奨 |
|---|---|
| Unit | testing + testify |
| Integration | testing + httptest |
| E2E | testing + chromedp |
テスト構造のテンプレート
ユニットテスト
describe('[Unit] ComponentName', () => {
describe('methodName', () => {
it('should [期待される動作] when [条件]', () => {
// Arrange
const input = createTestInput();
// Act
const result = methodName(input);
// Assert
expect(result).toEqual(expectedOutput);
});
it('should throw error when [無効な条件]', () => {
expect(() => methodName(invalidInput)).toThrow(ExpectedError);
});
});
});
統合テスト
describe('[Integration] API /users', () => {
beforeAll(async () => {
await setupTestDatabase();
});
afterAll(async () => {
await teardownTestDatabase();
});
it('should create user and return 201', async () => {
const response = await request(app)
.post('/users')
.send({ name: 'Test', email: 'test@example.com' });
expect(response.status).toBe(201);
expect(response.body.id).toBeDefined();
});
});
E2E テスト
describe('[E2E] User Registration Flow', () => {
it('should complete registration successfully', async ({ page }) => {
await page.goto('/register');
await page.fill('[data-testid="email"]', 'new@example.com');
await page.fill('[data-testid="password"]', 'SecurePass123!');
await page.click('[data-testid="submit"]');
await expect(page.locator('.welcome-message')).toBeVisible();
await expect(page).toHaveURL('/dashboard');
});
});
カバレッジ戦略
カバーするもの
- ✅ ビジネスロジック (100%)
- ✅ エッジケースとエラー処理 (90%+)
- ✅ API の契約 (100%)
- ✅ 重要なユーザーパス (E2E)
- ⚠️ UI コンポーネント (スナップショット + インタラクション)
- ❌ サードパーティライブラリの内部
- ❌ 単純なゲッター/セッター
カバレッジの閾値
{
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
},
"src/core/": {
"branches": 95,
"functions": 95
}
}
}
テストデータ管理
ファクトリ/ビルダー
// factories/user.js
export const userFactory = (overrides = {}) => ({
id: faker.string.uuid(),
name: faker.person.fullName(),
email: faker.internet.email(),
createdAt: new Date(),
...overrides,
});
// Usage
const admin = userFactory({ role: 'admin' });
フィクスチャ
// fixtures/users.json
{
"validUser": { "name": "Test", "email": "test@example.com" },
"invalidUser": { "name": "", "email": "invalid" }
}
モック戦略
モックするタイミング
- ✅ 外部 API とサービス
- ✅ ユニットテストでのデータベース
- ✅ 決定性のための時間/日付
- ✅ ランダムな値
- ❌ 内部モジュール (通常)
- ❌ テスト対象のコード
モックの例
// API mocking with MSW
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('/api/users', () => {
return HttpResponse.json([
{ id: 1, name: 'John' },
]);
}),
];
// Time mocking
vi.useFakeTimers();
vi.setSystemTime(new Date('2024-01-01'));
テスト検証ループ
テストを作成した後、この検証を実行してください。
テスト検証:
- [ ] すべてのテストに合格する: `npm test`
- [ ] カバレッジが閾値を満たしている: `npm test -- --coverage`
- [ ] 不安定なテストがない (複数回実行)
- [ ] テストが独立している (順序は関係ない)
- [ ] テスト名が動作を明確に記述している
テストが失敗した場合は、続行する前に修正してください。カバレッジが目標を下回っている場合は、カバーされていないコードパスに対してさらにテストを追加してください。
# Run tests
npm test
# Run with coverage
npm test -- --coverage
# Run specific test file
npm test -- path/to/test.spec.ts
# Run in watch mode during development
npm test -- --watch 📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Designing Tests
Test Implementation Workflow
Copy this checklist and track progress:
Test Implementation Progress:
- [ ] Step 1: Identify what to test
- [ ] Step 2: Select appropriate test type
- [ ] Step 3: Write tests following templates
- [ ] Step 4: Run tests and verify passing
- [ ] Step 5: Check coverage meets targets
- [ ] Step 6: Fix any failing tests
Testing Pyramid
Apply the testing pyramid for balanced coverage:
/\
/ \ E2E Tests (10%)
/----\ - Critical user journeys
/ \ - Slow but comprehensive
/--------\ Integration Tests (20%)
/ \ - Component interactions
/------------\ - API contracts
/ \ Unit Tests (70%)
/________________\ - Fast, isolated
- Business logic focus
Framework Selection
JavaScript/TypeScript
| Type | Recommended | Alternative |
|---|---|---|
| Unit | Vitest | Jest |
| Integration | Vitest + MSW | Jest + SuperTest |
| E2E | Playwright | Cypress |
| Component | Testing Library | Enzyme |
Python
| Type | Recommended | Alternative |
|---|---|---|
| Unit | pytest | unittest |
| Integration | pytest + httpx | pytest + requests |
| E2E | Playwright | Selenium |
| API | pytest + FastAPI TestClient | - |
Go
| Type | Recommended |
|---|---|
| Unit | testing + testify |
| Integration | testing + httptest |
| E2E | testing + chromedp |
Test Structure Templates
Unit Test
describe('[Unit] ComponentName', () => {
describe('methodName', () => {
it('should [expected behavior] when [condition]', () => {
// Arrange
const input = createTestInput();
// Act
const result = methodName(input);
// Assert
expect(result).toEqual(expectedOutput);
});
it('should throw error when [invalid condition]', () => {
expect(() => methodName(invalidInput)).toThrow(ExpectedError);
});
});
});
Integration Test
describe('[Integration] API /users', () => {
beforeAll(async () => {
await setupTestDatabase();
});
afterAll(async () => {
await teardownTestDatabase();
});
it('should create user and return 201', async () => {
const response = await request(app)
.post('/users')
.send({ name: 'Test', email: 'test@example.com' });
expect(response.status).toBe(201);
expect(response.body.id).toBeDefined();
});
});
E2E Test
describe('[E2E] User Registration Flow', () => {
it('should complete registration successfully', async ({ page }) => {
await page.goto('/register');
await page.fill('[data-testid="email"]', 'new@example.com');
await page.fill('[data-testid="password"]', 'SecurePass123!');
await page.click('[data-testid="submit"]');
await expect(page.locator('.welcome-message')).toBeVisible();
await expect(page).toHaveURL('/dashboard');
});
});
Coverage Strategy
What to Cover
- ✅ Business logic (100%)
- ✅ Edge cases and error handling (90%+)
- ✅ API contracts (100%)
- ✅ Critical user paths (E2E)
- ⚠️ UI components (snapshot + interaction)
- ❌ Third-party library internals
- ❌ Simple getters/setters
Coverage Thresholds
{
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
},
"src/core/": {
"branches": 95,
"functions": 95
}
}
}
Test Data Management
Factories/Builders
// factories/user.js
export const userFactory = (overrides = {}) => ({
id: faker.string.uuid(),
name: faker.person.fullName(),
email: faker.internet.email(),
createdAt: new Date(),
...overrides,
});
// Usage
const admin = userFactory({ role: 'admin' });
Fixtures
// fixtures/users.json
{
"validUser": { "name": "Test", "email": "test@example.com" },
"invalidUser": { "name": "", "email": "invalid" }
}
Mocking Strategy
When to Mock
- ✅ External APIs and services
- ✅ Database in unit tests
- ✅ Time/Date for determinism
- ✅ Random values
- ❌ Internal modules (usually)
- ❌ The code under test
Mock Examples
// API mocking with MSW
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('/api/users', () => {
return HttpResponse.json([
{ id: 1, name: 'John' },
]);
}),
];
// Time mocking
vi.useFakeTimers();
vi.setSystemTime(new Date('2024-01-01'));
Test Validation Loop
After writing tests, run this validation:
Test Validation:
- [ ] All tests pass: `npm test`
- [ ] Coverage meets thresholds: `npm test -- --coverage`
- [ ] No flaky tests (run multiple times)
- [ ] Tests are independent (order doesn't matter)
- [ ] Test names clearly describe behavior
If any tests fail, fix them before proceeding. If coverage is below target, add more tests for uncovered code paths.
# Run tests
npm test
# Run with coverage
npm test -- --coverage
# Run specific test file
npm test -- path/to/test.spec.ts
# Run in watch mode during development
npm test -- --watch