What tools does this skill support?

This skill is optimized for Vitest, React Testing Library (RTL), and Mock Service Worker (MSW) to provide a modern, type-safe testing environment.

Does it support Test-Driven Development (TDD)?

Yes, it encourages the Red-Green-Refactor process, ensuring that tests are written first to clarify requirements and prevent regressions.

Where should test files be located?

It follows the co-location principle, placing .test.tsx files directly alongside the source component files for better discoverability and maintenance.

How does it handle external API dependencies?

It uses Mock Service Worker (MSW) to intercept and mock API calls at the network level, ensuring tests remain fast and environment-independent.

What is the recommended test coverage?

The skill mandates a minimum of 60% unit test coverage overall, with specific targets ranging from 60% for Organisms to 70% for Atoms and Utils.

TypeScript Frontend Testing

Name: TypeScript Frontend Testing
Author: Tahir-yamin

byTahir-yamin

•

Security & Testing

Implements standardized frontend testing workflows using Vitest, React Testing Library, and MSW to ensure high-quality TypeScript applications.

About

This skill provides a comprehensive framework for frontend testing in TypeScript environments, specifically tailored for Vitest, React Testing Library, and Mock Service Worker (MSW). It enforces rigorous quality standards including a 60% minimum coverage policy, standardized component-specific targets (Atoms, Molecules, Organisms), and the Red-Green-Refactor development cycle. By focusing on user-observable behavior rather than implementation details, it helps developers build resilient test suites that are easy to maintain, environment-independent, and fully integrated into CI/CD pipelines.

Key Features

Advanced mocking strategies for type-safe API simulation
Best practices for test co-location and naming conventions
Mandatory coverage enforcement based on component complexity levels
Standardized testing patterns for Vitest, RTL, and MSW integration
3 GitHub stars
Red-Green-Refactor workflow guidance for test-driven development

Use Cases

Setting up a new frontend project with Vitest and React Testing Library
Refactoring legacy components using the Red-Green-Refactor process
Enforcing code quality and coverage requirements during code reviews

About

Key Features

Advanced mocking strategies for type-safe API simulation
Best practices for test co-location and naming conventions
Mandatory coverage enforcement based on component complexity levels
Standardized testing patterns for Vitest, RTL, and MSW integration
3 GitHub stars
Red-Green-Refactor workflow guidance for test-driven development

Use Cases

Setting up a new frontend project with Vitest and React Testing Library
Refactoring legacy components using the Red-Green-Refactor process
Enforcing code quality and coverage requirements during code reviews