How does it handle API and network requests?

It implements type-safe MSW (Mock Service Worker) handlers to intercept network requests, ensuring realistic testing without hitting actual backends.

What are the required code coverage levels?

The skill mandates a minimum of 60% coverage for unit tests, with specific targets up to 70% for Atoms and Utility functions.

Can it help with accessibility testing?

Yes, it enforces the use of accessible queries (getByRole, getByLabelText) over implementation details like test IDs or CSS classes.

Which testing frameworks does this skill support?

This skill is specifically optimized for projects using Vitest for execution, React Testing Library for UI components, and MSW for network mocking.

Where should test files be located?

It follows the Co-location principle, meaning test files (.test.tsx) should be placed in the same directory as the component they are testing.

TypeScript Testing (Frontend)

Name: TypeScript Testing (Frontend)
Author: shinpr

byshinpr

•

152

セキュリティとテスト

Standardizes frontend testing workflows using Vitest, React Testing Library, and MSW for production-grade React components.

概要

This skill provides Claude with a rigorous framework for implementing high-quality frontend tests in TypeScript environments. It enforces industry-standard tools like Vitest for execution, React Testing Library for user-centric component validation, and Mock Service Worker (MSW) for type-safe API mocking. By adhering to the Co-location principle and accessibility-first query patterns, the skill ensures that AI-generated tests are maintainable, resilient to implementation changes, and meet strict coverage requirements across all component granularities.

主な機能

Standardized Vitest and React Testing Library configurations
Co-location file structure for enhanced project maintainability
Accessibility-first testing queries to ensure robust UI interactions
Type-safe API mocking using Mock Service Worker (MSW)
152 GitHub stars
Strict coverage targets (60%+) for units, hooks, and utils

ユースケース

Mocking complex REST API interactions for feature-level integration tests
Generating unit tests for new React components during development
Automating code coverage improvements for legacy TypeScript codebases

概要

主な機能

Standardized Vitest and React Testing Library configurations
Co-location file structure for enhanced project maintainability
Accessibility-first testing queries to ensure robust UI interactions
Type-safe API mocking using Mock Service Worker (MSW)
152 GitHub stars
Strict coverage targets (60%+) for units, hooks, and utils

ユースケース

Mocking complex REST API interactions for feature-level integration tests
Generating unit tests for new React components during development
Automating code coverage improvements for legacy TypeScript codebases