Testing best practices for the frontend. Emphasizes E2E tests over unit tests, minimal mocking, and testing behavior over implementation details. Use when writing tests or reviewing test code.
The frontend-testing-best-practices skill provides comprehensive guidelines for writing effective, maintainable tests for frontend applications. It addresses the common problem of writing tests that are brittle, hard to maintain, and provide false confidence by focusing on implementation details rather than user behavior. This skill emphasizes a philosophy that prioritizes end-to-end (E2E) tests over unit tests, minimal mocking, and testing behavior rather than implementation details.
The skill contains 6 core rules organized into three categories: Testing Strategy (critical level), E2E Tests (high priority), and Unit Tests (medium priority). Key capabilities include guidance on when to write E2E versus unit tests, how to structure E2E tests in the correct directory, best practices for using accessible selectors in Playwright tests, avoiding React component unit tests, and keeping mocks simple. The rules use practical code examples comparing good and bad approaches to make the guidelines immediately actionable.
This skill is ideal for frontend developers working on web applications who need to make testing decisions, write new tests, or review test code. It's particularly valuable for teams using Playwright for E2E testing and React for UI components. Use this skill when deciding what type of test to write, implementing new test coverage, refactoring existing tests, or conducting code reviews of test files. The guidelines help teams avoid common testing anti-patterns and build test suites that provide real confidence in application behavior.
Default to E2E tests for most scenarios. Only write unit tests for pure functions that have no dependencies and perform isolated logic like data formatting or calculations. If you're testing anything that involves React components, API calls, or user interactions, write an E2E test instead.
The skill uses Playwright for E2E testing examples and references MSW (Mock Service Worker) for API mocking. The React component examples suggest a JavaScript/TypeScript frontend stack, but the core principles apply to any frontend framework.
If you need 3 or more mocks in a single test, that's a signal to write an E2E test instead. Simple mocks (like a single MSW handler for an API endpoint) are fine, but complex mock setups indicate you should test the real integrated system.
E2E tests should be placed in the e2e/tests/ directory at the project root, not within the frontend/ directory. This keeps them separate from unit tests and makes it clear they test the entire system.
Follow this priority: role-based selectors (getByRole) are preferred, then label-based (getByLabel), then text content, and finally test IDs (getByTestId) only when no accessible selector exists. Avoid CSS selectors as they are brittle and don't reflect how users interact with the application.
Quick Setup:
.claude/skills/Repository
sergiodxa/agent-skills