skills.rest
jorggerojas
jorggerojasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

testing

Define a unified testing strategy for React projects with Vitest, RTL, and Playwright.

1|Updated Jan 12, 2026
Search Tags:#vitest#testing#playwright#e2e-testing#rtl#component-testing
One-click install
npx skills add https://github.com/jorggerojas/next-skeleton-page --skill testing-jorggerojas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: testing
Source: https://github.com/jorggerojas/next-skeleton-page/tree/main/.cursor/skills/testing
Command: npx skills add https://github.com/jorggerojas/next-skeleton-page --skill testing-jorggerojas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured approach to testing React/Next.js projects, enabling teams to write and organize unit, integration, and end-to-end tests with a consistent setup and best practices.

Core Features & Use Cases

  • Vitest: Unit and integration tests
  • React Testing Library (RTL): Component testing
  • Playwright: End-to-end (E2E) tests
  • Setup & Organization: Centralized test setup in src/tests/setup.tsx and clear test organization for components, hooks, and API routes
  • E2E in a Real Project: E2E tests live in e2e/ with examples and guidance

Quick Start

Run all tests from the project root with bun test for unit and integration tests and npx playwright test for end-to-end tests.

Frequently Asked Questions about testing

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

FAQPage Schema
How do I organize unit and e2e tests in a React project using Vitest and Playwright?▼

Organize React tests by placing unit and integration tests in src with Vitest, and end-to-end tests in an e2e directory with Playwright. Centralized setup lives in src/tests/setup.tsx to configure test utilities and mock usage.

What's the best way to test React components with React Testing Library?▼

Test React components using React Testing Library with accessibility queries as a best practice. This testing approach is configured through a centralized setup file, enabling consistent component testing and mock usage across the project.

Does this testing strategy work with Next.js API routes and components?▼

This testing strategy applies directly to Next.js codebases, specifying test organization and configuration for API routes and React components. It guides test discovery and execution across unit, integration, and end-to-end tests.

How do I run unit and Playwright e2e tests in a unified setup?▼

Run unit and integration tests using bun test from the project root, and execute end-to-end tests using npx playwright test. This unified testing setup separates fast component tests from slower browser-driven e2e tests.

Can I use Vitest for both unit and integration tests in a React application?▼

Vitest handles both unit and integration tests within React projects. It pairs with React Testing Library for component testing and Playwright for end-to-end tests, providing a complete test pyramid strategy.

What testing limitations should I consider for a unified Vitest and Playwright setup?▼

This testing approach requires separating test concerns into specific directories, with unit tests in src and e2e tests in a dedicated e2e folder. Configuration relies on centralized setup files to manage test utilities and mocks properly.

Related Skills

Explore More Software Engineering Skills→
RinKhimeraRinKhimera
2

convex-quickstart

Initialize and configure a Convex backend for frontend projects.

Community
Intermediate
robit-manrobit-man

tdd-enforce

Configure TDD enforcement with pre-commit hooks and CI coverage gates.

Community
Advanced
futureteafuturetea

ESLint Setup

Configure ESLint for JavaScript and TypeScript projects with flat or legacy configs.

Community
Intermediate
EngineerWithAIEngineerWithAI
4

javascript-testing-patterns

Implement Jest, Vitest, and Testing Library tests for JavaScript and TypeScript.

Official
Intermediate