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

•

Security & Testing

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.

Key Features

01Enforces Red-Green-Refactor workflow for test-first development

02Standardizes testing with Vitest, React Testing Library, and MSW

03Implements the co-location principle for better test maintenance

04Defines granular coverage targets for different component types and hooks

05Provides clear guidelines for mocking external dependencies and API calls

061 GitHub stars

Use Cases

01Auditing and refactoring existing test suites to meet 60%+ coverage requirements

02Generating unit tests for React components that focus on user-observable behavior

03Configuring type-safe API mocks using Mock Service Worker (MSW) for integration tests

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tundraray/claude-code-workflows typescript-testing

For use in Claude.ai and ChatGPT

Download Skill