Why focus on integration testing instead of unit testing?

This skill follows the philosophy that integration tests provide a higher confidence-to-effort ratio by testing real user behavior rather than internal code implementation.

When should I use Playwright according to this skill?

Playwright is reserved for critical user flows and end-to-end paths where full browser environment validation is essential for business continuity.

How does it handle API mocking?

It provides specific rules for organizing MSW (Mock Service Worker) handlers to mirror your API structure, ensuring mocks are scalable and easy to maintain.

What tech stack does this testing skill support?

It is optimized for React applications using Vite, React Router, TanStack Query, Vitest, Testing Library, MSW, and Playwright.

Can this skill help with existing test debt?

Yes, it includes guidelines for reviewing legacy tests to identify anti-patterns and refactoring them to improve maintainability and reliability.

React Testing Strategy

Name: React Testing Strategy
Author: ng-hai

byng-hai

•

Seguridad y Pruebas

Implements an integration-heavy testing framework for React applications using Vitest, MSW, and Playwright.

This skill provides a specialized framework for testing modern React applications built with Vite, React Router, and TanStack Query. It prioritizes integration testing over unit testing, emphasizing the validation of user behavior rather than implementation details. By guiding Claude through MSW mock setup, component boundary definition, and Playwright E2E coverage for critical paths, this skill ensures developers build resilient, maintainable test suites that offer a high confidence-to-effort ratio.

Características Principales

01Integration-first testing patterns for high-confidence React features

02Refactoring support for migrating away from implementation-detail tests

03Best practices for Vite, React Router, and TanStack Query ecosystems

04MSW handler organization strategies for scalable API mocking

05User-centric testing guidance using Testing Library and Playwright

064 GitHub stars

Casos de Uso

01Mocking complex API interactions using structured MSW handlers

02Architecting a new test suite for a Vite + React Router application

03Reviewing and refactoring existing tests to focus on user behavior

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude testing-strategy

For use in Claude.ai and ChatGPT

Download Skill