tdd-typescript skill

Overview

This skill teaches strict Test-Driven Development for TypeScript and JavaScript using Vitest and a red-green-refactor workflow. It covers unit testing for utilities and React component testing with patterns and templates that encourage minimal passing implementations and safe refactors. The goal is repeatable TDD cycles that produce robust, well-typed code and high coverage.

How this skill works

I guide you to write failing tests first, implement the smallest change to make tests pass, then refactor while keeping tests green. The skill includes concrete test templates, example cycles, and patterns for TypeScript typing, mocking, and DOM testing for React. It emphasizes Vitest configuration, assertion styles, and coverage instrumentation so tests stay fast and meaningful.

When to use it

• Implementing new TypeScript features using a test-first workflow
• Developing or refactoring React components with unit and DOM tests
• Introducing Vitest to a project or standardizing test patterns
• Improving or enforcing high test coverage and type-safe tests
• Training teams on disciplined red-green-refactor TDD cycles

Best practices

• Write a focused failing test that expresses one behavior before implementation
• Make the smallest change to pass a test, then run the full suite before refactor
• Prefer explicit TypeScript types in tests to catch contract regressions
• Use Vitest spies/mocks for external interactions and React Testing Library for component DOM assertions
• Keep tests deterministic and fast; avoid heavy integration setup in unit tests

Example use cases

• Adding a new utility function: create a failing test, implement minimal logic, then refine types and edge cases
• Building a React form component: write tests for rendering, validation, and user events before coding UI
• Migrating JavaScript modules to TypeScript with stepwise tests to preserve behavior
• Enforcing a team workflow: commit cycles that show red-green-refactor history for review
• Creating reusable test templates for async flows, error handling, and coverage checks

FAQ