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.

主要功能

01Standardized Vitest and React Testing Library configurations

02Co-location file structure for enhanced project maintainability

03Accessibility-first testing queries to ensure robust UI interactions

04Type-safe API mocking using Mock Service Worker (MSW)

05152 GitHub stars

06Strict coverage targets (60%+) for units, hooks, and utils

使用场景

01Mocking complex REST API interactions for feature-level integration tests

02Generating unit tests for new React components during development

03Automating code coverage improvements for legacy TypeScript codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shinpr/ai-coding-project-boilerplate typescript-testing

For use in Claude.ai and ChatGPT

Download Skill