skills.rest
programadorisgod
programadorisgodCOMMUNITY
Explore all skills by this author →
GitHub

frontend-testing-best-practices

Provides E2E-first frontend testing guidelines for React, Next.js, and Svelte projects.

1|Updated Feb 26, 2026
Search Tags:#vitest#testing#frontend#e2e#playwright#mocking#testing-strategy
One-click install
npx skills add https://github.com/programadorisgod/builder-projects --skill frontend-testing-best-practices-programadorisgod
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing-best-practices
Source: https://github.com/programadorisgod/builder-projects/tree/main/bin/assets/.agents/skills/frontend-testing-best-practices
Command: npx skills add https://github.com/programadorisgod/builder-projects --skill frontend-testing-best-practices-programadorisgod

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams struggle to balance testing scope, often relying on brittle unit tests or incomplete coverage. This Skill provides a structured set of guidelines to prioritize end-to-end testing, minimize mocking, and ensure tests reflect user behavior.

Core Features & Use Cases

  • E2E-first testing philosophy with rules to prefer Playwright-based end-to-end tests over unit tests
  • Clear guidance to avoid testing React components in isolation and focus on user flows
  • A structured set of rules and references to organize tests across e2e-test-structure, unit-test-structure, and related resources

Quick Start

Apply these guidelines when writing or reviewing frontend tests to ensure E2E-first coverage and minimal mocking.

Frequently Asked Questions about frontend-testing-best-practices

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

FAQPage Schema
What is the best way to balance E2E and unit tests in frontend testing?▼

The best way to balance frontend testing is adopting an E2E-first philosophy, prioritizing Playwright end-to-end tests for user flows over brittle unit tests, and minimizing mocks to ensure tests reflect actual user behavior.

How do I structure frontend tests around user flows instead of isolated components?▼

To structure frontend tests around user flows, avoid testing React components in isolation and apply structured rules to organize tests across e2e-test-structure and unit-test-structure, focusing on validating complete user interactions.

When should I minimize mocking in Playwright and Vitest test suites?▼

You should minimize mocking in Playwright and Vitest suites when validating user flows, replacing isolated component tests with robust end-to-end execution to prevent brittle tests and ensure coverage reflects real behavior.

Does this E2E-first testing strategy work with Svelte and Next.js projects?▼

Yes, this E2E-first testing strategy applies to Svelte, Next.js, and React frontend projects, providing standardized policy documents to guide when to use end-to-end versus unit tests across various frameworks.

Why should I avoid isolated component tests in favor of E2E validation?▼

You should avoid isolated component tests because they are often brittle and provide incomplete coverage, whereas E2E validation focuses on user behavior, offering a more robust representation of application functionality.

Related Skills

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

test-setup

Initialize Vitest and Playwright testing infrastructure from upstream configs.

Official
Intermediate
hffmnnjhffmnnj
39

testing

Automate unit, integration, and E2E tests in JavaScript/TypeScript projects.

Community
Intermediate
carrotwaxrcarrotwaxr
37

writing-tests

Enforce consistent testing conventions across client, server, and E2E suites.

Community
Advanced
botPhUbotPhU

jest-testing-expert

Design and configure Jest test suites for TypeScript projects.

Community
Advanced