Does it support Test-Driven Development (TDD)?

Yes, it integrates the Red-Green-Refactor process, guiding Claude to write tests before implementation to ensure clear specifications and prevent regression.

Which testing frameworks are supported by this skill?

This skill is specifically optimized for Vitest, React Testing Library (RTL), and Mock Service Worker (MSW) for a modern, high-performance testing stack.

Where are test files stored in this workflow?

The skill follows the co-location principle, placing .test.tsx files in the same directory as the components they verify for easier maintenance.

What are the default code coverage requirements?

The skill enforces a minimum of 60% coverage overall, with higher targets for atoms and utility functions reaching up to 70%.

How does this skill handle API and network requests?

It utilizes MSW (Mock Service Worker) to intercept and mock network requests at the network level, ensuring tests are fast and independent of a live backend.

TypeScript Frontend Testing

Name: TypeScript Frontend Testing
Author: tundraray

bytundraray

•

Security & Testing

Implements production-ready frontend testing workflows using Vitest, React Testing Library, and MSW.

This skill provides Claude with a comprehensive framework for writing, reviewing, and maintaining high-quality frontend tests in TypeScript environments. It enforces industry best practices such as the Red-Green-Refactor TDD process, co-location of test files, and specific coverage targets (60%+) across different component types. By integrating Vitest for execution, React Testing Library for user-centric behavior validation, and Mock Service Worker (MSW) for type-safe API mocking, it ensures that your test suite is independent, reproducible, and focused on user-observable outcomes rather than implementation details.

Key Features

01Standardized co-location patterns and naming conventions for improved maintainability.

02Automated Vitest and React Testing Library configuration for components and hooks.

03Built-in Red-Green-Refactor workflow guidance to ensure code quality during development.

04Type-safe API mocking with MSW (Mock Service Worker) to eliminate environment dependencies.

051 GitHub stars

06Enforcement of 60%+ unit test coverage with specific targets for atoms, molecules, and organisms.

Use Cases

01Refactoring legacy frontend code safely by establishing a baseline of failing and passing tests.

02Generating comprehensive unit tests for React components with automated coverage checks.

03Setting up integration tests that mock backend APIs to verify complex functional flows.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tundraray/overture typescript-testing

For use in Claude.ai and ChatGPT

Download Skill