What are the minimum code coverage requirements?

The skill mandates a minimum of 60% unit test coverage, with specific targets like 70% for Atoms and Utils to ensure high reliability.

Where should test files be located?

The skill enforces the co-location principle, where test files are placed in the same directory as their corresponding source files for better discoverability.

Which testing frameworks does this skill support?

This skill is specifically optimized for projects using Vitest, React Testing Library (RTL), and Mock Service Worker (MSW).

Does it support Test-Driven Development (TDD)?

Yes, it follows the Red-Green-Refactor process, encouraging users to write failing tests before implementation to clarify expected behavior.

How does it handle external API dependencies?

It utilizes Mock Service Worker (MSW) for API mocking, ensuring that tests remain environment-independent and do not rely on actual database connections.

TypeScript Frontend Testing

Name: TypeScript Frontend Testing
Author: tundraray

bytundraray

•

보안 및 테스팅

Standardizes frontend testing workflows using Vitest, React Testing Library, and MSW to ensure high-quality, production-ready TypeScript code.

소개

This skill equips Claude with a robust framework for frontend testing, enforcing industry best practices like the Red-Green-Refactor process and user-observable behavior verification. It sets clear coverage targets across different component levels—from Atoms to Organisms—and provides specific implementation patterns for unit, integration, and cross-functional E2E tests. By automating the application of these rules, it ensures that tests remain independent, reproducible, and maintainable, significantly reducing regression risks in modern TypeScript and React environments.

주요 기능

Enforces Red-Green-Refactor workflow for test-first development
Standardizes testing with Vitest, React Testing Library, and MSW
Implements the co-location principle for better test maintenance
Defines granular coverage targets for different component types and hooks
Provides clear guidelines for mocking external dependencies and API calls
1 GitHub stars

사용 사례

Auditing and refactoring existing test suites to meet 60%+ coverage requirements
Generating unit tests for React components that focus on user-observable behavior
Configuring type-safe API mocks using Mock Service Worker (MSW) for integration tests

소개

주요 기능

Enforces Red-Green-Refactor workflow for test-first development
Standardizes testing with Vitest, React Testing Library, and MSW
Implements the co-location principle for better test maintenance
Defines granular coverage targets for different component types and hooks
Provides clear guidelines for mocking external dependencies and API calls
1 GitHub stars

사용 사례

Auditing and refactoring existing test suites to meet 60%+ coverage requirements
Generating unit tests for React components that focus on user-observable behavior
Configuring type-safe API mocks using Mock Service Worker (MSW) for integration tests