Can I mock my Zustand stores or internal components?

No, the skill enforces a 'Mock Boundary Rule' where only API boundaries (via MSW) and specific browser globals should be mocked. Internal logic and components should remain real.

What testing tools does this skill support?

It is specifically optimized for React projects using Vite, TypeScript, Vitest, and React Testing Library (RTL).

Why must I delete code written before a test?

To maintain TDD discipline. If you didn't watch the test fail first, you cannot be certain the test is actually verifying the correct behavior.

What is the 'Bug It Catches' table?

It is a mandatory planning requirement that forces you to identify the specific bug each test is designed to prevent before any code is written.

React TDD Workflow

Name: React TDD Workflow
Author: fiatkongen

byfiatkongen

0•

セキュリティとテスト

Enforces strict Test-Driven Development patterns for React, Vite, and TypeScript applications using Vitest and React Testing Library.

This skill establishes a disciplined Red-Green-Refactor cycle for React development, ensuring that no implementation code is written without a preceding failing test. It optimizes the developer workflow by providing clear boundaries for mocking with MSW, emphasizing behavioral testing over implementation details, and preventing common anti-patterns. By following the 'Iron Laws' of TDD, it helps developers build robust, bug-resistant features while maintaining a clean, refactorable codebase in modern Vite and TypeScript environments.

主な機能

01Standardized MSW API mocking boundaries

02Optimized for Vitest and React Testing Library

03Behavioral test planning with 'Bug It Catches' tables

040 GitHub stars

05Anti-pattern detection and resolution guidance

06Strict Red-Green-Refactor cycle enforcement

ユースケース

01Safely refactoring complex components and custom hooks

02Building new React features from scratch with 100% test coverage

03Fixing production bugs by reproducing them with failing tests first

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fiatkongen/saurun-marketplace react-tdd

For use in Claude.ai and ChatGPT

Download Skill