Notre avis

Implémente des fonctionnalités en suivant le cycle TDD (rouge-vert-refactor) avec Svelte et Vitest.

Points forts

Garantit une couverture de test complète dès le début
Structure claire du processus de développement
Réduit les régressions grâce à des tests automatisés
Encourage le code minimal et le refactoring

Limites

Nécessite une discipline stricte pour respecter le cycle
Peut ralentir le développement initial pour des tâches simples
Ne convient pas pour l'exploration ou le prototypage rapide

Quand l'utiliser

Utilisez cette compétence lorsque vous implémentez une fonctionnalité bien définie dans un projet Svelte nécessitant une fiabilité élevée.

Quand l'éviter

Évitez cette compétence lors de phases de prototypage rapide ou lorsque les exigences sont encore floues et changent fréquemment.

Exemples

Implement a user login form

Implement a user login form with email and password fields, validation, and submit handler. Use TDD cycle with Svelte 5 and Vitest.

Add a counter component

Add a counter component that increments and decrements using Svelte 5 runes. Write tests first, then implement, then refactor.

description: TDD（テスト駆動開発）サイクルで機能を実装する allowed-tools: Bash, Read, Write, Edit, Grep, Glob argument-hint: <対象コンポーネントまたは機能の説明>

TDD 実装スキル

ワークフロー

Step 1: 対象把握

$ARGUMENTS から実装対象を把握する
関連する既存コード・テストを確認する
テストファイルの配置先を決定する（co-located .test.ts）

Step 2: RED - 失敗するテストを書く

テストファイルを作成する（存在しない場合）
テスト対象の振る舞いをテストとして記述する
- テスト説明は 日本語
- describe / it を使用
pnpm test を実行し、テストが 失敗する ことを確認する

import { render, screen } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import MyComponent from './MyComponent.svelte';

describe('MyComponent', () => {
  it('期待する振る舞いの説明', () => {
    render(MyComponent, { props: { /* ... */ } });
    // Assert
  });
});

Step 3: GREEN - テストを通す最小限のコードを書く

テストを通すための 最小限 の実装を行う
コンポーネントは Svelte v5 Runes API で実装する
pnpm test を実行し、テストが 成功する ことを確認する

Step 4: REFACTOR - コードを整理する

重複の除去、命名の改善
コンポーネント分割、Store の抽出
pnpm test を実行し、テストが 引き続き成功する ことを確認する

繰り返し

Step 2〜4 を対象機能が完成するまで繰り返す。各サイクルで必ず pnpm test を実行する。

Implémentation TDD (Développement Piloté par les Tests)

Recommandé pour