react-testing-workflows

What problem does it solve?

This Skill solves the problem of inconsistent, incomplete testing strategies for React applications, where teams often miss critical test layers, struggle with flaky tests, or lack standardized patterns for writing maintainable, reliable tests across the entire testing pyramid.

Core Features & Use Cases

• Multi-Layer Testing Coverage: Provides standardized workflows aligned with industry testing pyramid ratios for unit tests (Vitest), component integration tests (React Testing Library), end-to-end cross-browser tests (Playwright), and visual regression tests (Storybook).
• Pre-Configured Test Infrastructure: Includes ready-to-use configurations for all testing tools, pre-built mocks for common browser APIs (IntersectionObserver, matchMedia, ResizeObserver), and MSW setups for API mocking to reduce setup time.
• Debugging & Best Practices: Offers guidance for resolving common test failures including act warnings, flaky async tests, and missing ARIA role errors, while enforcing accessible query patterns to ensure tests validate real user experiences.
• Use Case: For a React e-commerce application, use this Skill to implement a full test suite that catches UI regressions, validates checkout user flows, and ensures component accessibility across Chrome, Firefox, and Safari.

Quick Start

Use the react-testing-workflows skill to set up a complete testing pipeline for your React TypeScript app, including Vitest unit and integration tests, Playwright cross-browser E2E tests, Storybook visual interaction tests, and configurable coverage thresholds.