testing-rules

Configure Vitest, React Testing Library, and Playwright for React applications.

3|Updated Apr 12, 2026
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill testing-rules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: testing-rules
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/testing-rules
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill testing-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Testing React applications can be fragmented, with inconsistent configurations and a lack of guidance on unit, integration, and end‑to‑end testing. Developers often struggle to set up Vitest, React Testing Library, Playwright, mocking, and coverage targets efficiently.

Core Features & Use Cases

  • Unified testing setup: Provides Vitest configuration with jsdom, coverage thresholds, and shared setup files for both Next.js and Vite SPA projects.
  • Accessibility‑first queries: Prioritizes RTL queries such as role, label, placeholder, and text to ensure tests are aligned with WCAG standards.
  • Realistic user interactions: Enforces userEvent.setup() over fireEvent for authentic event simulation.
  • Hook testing support: Demonstrates renderHook usage with custom provider wrappers.
  • Robust mocking: Shows vi.mock for module mocking and MSW for realistic network request handling.
  • E2E automation: Supplies Playwright configuration and example tests for critical business flows.
  • Consistent test patterns: Promotes the AAA structure, test data builders, and custom render utilities with providers.

Quick Start

Ask the assistant to configure Vitest, RTL, and Playwright for a new React project and generate a sample test file following the outlined patterns.

Frequently Asked Questions about testing-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Vitest and React Testing Library for a new React project?▼

Vitest and React Testing Library configuration requires shared setup files with jsdom, coverage thresholds set to 80%, and standardized configurations for Next.js or Vite SPA projects.

What is the best way to mock API requests in Vitest tests?▼

Mocking API requests in Vitest is best handled using vi.mock for module mocking and MSW for realistic network request handling.

Does this testing setup work with Next.js applications?▼

Yes, this testing setup works with Next.js applications, providing Vitest configuration with jsdom, coverage thresholds, and shared setup files tailored for the framework.

Why should I use userEvent over fireEvent in React component tests?▼

UserEvent should be used over fireEvent in React component tests to provide realistic user interaction simulation, ensuring tests accurately reflect real user behavior.

How do I set up E2E testing with Playwright for critical business flows?▼

Setting up E2E testing with Playwright involves applying the provided Playwright configuration and example tests to automate and validate critical business flows.

What testing patterns should I follow for React hooks with RTL?▼

Testing React hooks with RTL requires using renderHook with custom provider wrappers, following AAA structure, and utilizing test data builders for consistent results.