skills.rest
eric-sabe
eric-sabeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-testing

Standardize Vitest, React Testing Library, and Playwright test practices for React and Next.js.

1|Updated Jun 24, 2026
Search Tags:#vitest#frontend testing#playwright#e2e testing#react testing library#accessibility testing#radix ui
One-click install
npx skills add https://github.com/eric-sabe/engsys --skill frontend-testing-eric-sabe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/eric-sabe/engsys/tree/main/stacks/platform/web/skills/frontend-testing
Command: npx skills add https://github.com/eric-sabe/engsys --skill frontend-testing-eric-sabe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates common frontend testing pitfalls for React and Next.js apps, including flaky Vitest specs, inaccessible React Testing Library queries, unregistered Playwright E2E tests that create silent CI coverage gaps, and broken mock factories that cause unexpected test failures.

Core Features & Use Cases

  • Vitest best practices: Covers mock factory hoisting, Vitest 4 pool configuration, and fake timer act() patterns to prevent flaky unit and component tests.
  • RTL discipline: Enforces accessible query usage, provides workarounds for Radix UI portal limitations in JSDOM, and outlines useLayoutEffect patterns for test-observable state accumulation.
  • Playwright E2E guardrails: Includes CI matrix registration requirements, local DB migration steps, whole-document accessibility scans, and guidance to avoid common spec-authoring footguns. Use case: A frontend team building a Next.js dashboard can use this Skill to ensure all their unit, component, and E2E tests are reliable, accessible, and actually run in CI, catching UI and logic bugs before they reach production.

Quick Start

Use the frontend-testing skill to write or review Vitest specs, React Testing Library component tests, and Playwright E2E tests for your React or Next.js frontend, following all outlined best practices to avoid flaky tests and coverage gaps.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema
How do I fix flaky Vitest mock factory hoisting and fake timer errors in React unit tests?▼

Fix flaky Vitest tests by enforcing mock factory hoisting and applying fake timer act() patterns. Standardizing these practices prevents unexpected mock failures and ensures test-observable state accumulation runs reliably.

How do I test Radix UI components using React Testing Library when portals fail in JSDOM?▼

Test Radix UI components in JSDOM by applying specific portal test workarounds and enforcing accessible query usage. This ensures your React Testing Library queries correctly target elements rendered outside the standard DOM tree.

Why do my Playwright E2E tests create silent CI coverage gaps in Next.js applications?▼

Playwright E2E tests create silent CI coverage gaps when spec registration requirements are ignored. Enforcing CI test matrix registration ensures all end-to-end specs actually execute and catch UI bugs before reaching production.

What is the best way to run whole-document accessibility scans in Playwright E2E tests?▼

Run whole-document accessibility scans during E2E tests by integrating scanning tools into your Playwright spec registration. This catches inaccessible UI structures and query usage issues before they reach production.

Can I use this frontend testing approach for both unit and end-to-end Next.js tests?▼

Yes, you can use this approach for Next.js unit and end-to-end tests. It standardizes practices across Vitest, React Testing Library, and Playwright to reliably cover component specs and full CI test matrices.

Related Skills

Explore More Software Engineering Skills→
lucidlabs-hqlucidlabs-hq
2

test-setup

Initialize Vitest and Playwright testing infrastructure from upstream configs.

Official
Intermediate
ValyntValynt

run-tests

Automate test execution, coverage reporting, and CI validation with Vitest and Playwright.

Official
Advanced
castlemilkcastlemilk
3

testing

Automate unit, integration, and end-to-end tests for the Shorted project.

Community
Intermediate
optionioptioni

vitest

Guide TypeScript testing with Vitest for unit, component, and integration tests.

Official
Advanced