How does this skill handle TDD?

It implements the Red-Green-Refactor process, encouraging developers to write a failing test first, pass it with minimal code, and then refactor for quality.

Does it support API mocking?

Yes, it uses MSW (Mock Service Worker) to mock external dependencies in integration tests, ensuring tests are independent of backend availability.

What are the code coverage requirements?

The skill mandates a minimum of 60% overall unit test coverage, with higher specific targets for atoms (70%), molecules (65%), and custom hooks (65%).

What is the recommended file structure for tests?

Following the co-location principle, test files should be placed in the same directory as the component (e.g., Button.test.tsx next to Button.tsx).

Which testing frameworks are supported by this skill?

This skill is specifically designed for Vitest, React Testing Library (RTL), and Mock Service Worker (MSW) for API mocking.

TypeScript Frontend Testing

Name: TypeScript Frontend Testing
Author: Tahir-yamin

byTahir-yamin

•

安全与测试

Enforces robust frontend testing standards using Vitest, React Testing Library, and MSW to ensure high-quality, reliable TypeScript codebases.

This skill provides a comprehensive framework for frontend testing, emphasizing a Red-Green-Refactor workflow and test-driven development. It integrates Vitest for execution, React Testing Library for user-centric component validation, and MSW for type-safe API mocking. By enforcing specific coverage targets ranging from 60% to 70% and promoting the co-location of tests with components, it ensures that frontend applications remain maintainable, regression-free, and aligned with modern quality standards like ADR-0002.

主要功能

013 GitHub stars

02Type-safe API mocking using MSW (Mock Service Worker)

03Support for Arrange-Act-Assert patterns and co-located test directory structures

04Guided implementation of the Red-Green-Refactor (TDD) development cycle

05Enforcement of coverage requirements (60% minimum) across various component types

06Automated Vitest and React Testing Library configuration and best practices

使用场景

01Writing unit tests for React components with RTL and Vitest

02Mocking complex backend APIs for integration testing without actual network calls

03Implementing TDD workflows to prevent regressions during feature development and refactoring

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tahir-yamin/dev-engineering-playbook typescript-testing

For use in Claude.ai and ChatGPT

Download Skill