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.

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

01Advanced mocking strategies for type-safe API simulation

02Best practices for test co-location and naming conventions

03Mandatory coverage enforcement based on component complexity levels

04Standardized testing patterns for Vitest, RTL, and MSW integration

053 GitHub stars

06Red-Green-Refactor workflow guidance for test-driven development

Use Cases

01Setting up a new frontend project with Vitest and React Testing Library

02Refactoring legacy components using the Red-Green-Refactor process

03Enforcing code quality and coverage requirements during code reviews

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