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.

주요 기능

3 GitHub stars
Type-safe API mocking using MSW (Mock Service Worker)
Support for Arrange-Act-Assert patterns and co-located test directory structures
Guided implementation of the Red-Green-Refactor (TDD) development cycle
Enforcement of coverage requirements (60% minimum) across various component types
Automated Vitest and React Testing Library configuration and best practices

사용 사례

Writing unit tests for React components with RTL and Vitest
Mocking complex backend APIs for integration testing without actual network calls
Implementing TDD workflows to prevent regressions during feature development and refactoring

소개

주요 기능

3 GitHub stars
Type-safe API mocking using MSW (Mock Service Worker)
Support for Arrange-Act-Assert patterns and co-located test directory structures
Guided implementation of the Red-Green-Refactor (TDD) development cycle
Enforcement of coverage requirements (60% minimum) across various component types
Automated Vitest and React Testing Library configuration and best practices

사용 사례

Writing unit tests for React components with RTL and Vitest
Mocking complex backend APIs for integration testing without actual network calls
Implementing TDD workflows to prevent regressions during feature development and refactoring