frontend-testing-best-practices_skill

Overview

This skill captures frontend testing best practices focused on practical, reliable tests that reflect real user behavior. It emphasizes end-to-end (E2E) tests as the default, minimal mocking, and testing behavior rather than implementation details. Use it to guide writing, organizing, and reviewing frontend tests for maintainability and confidence.

How this skill works

The skill defines a clear testing strategy: default to E2E tests for user flows and only write unit tests for pure functions. It prescribes structure and locations for tests, recommends accessible selectors for E2E, and enforces limits on mocking complexity. Concrete examples and file locations show how to apply the rules in Playwright and Vitest setups.

When to use it

• Deciding whether to write an E2E test or a unit test
• Writing new tests for user flows, pages, or utilities
• Reviewing or refactoring existing test suites
• Setting up test folders, utilities, and global test configuration
• Choosing selectors and mocking strategies for reliable tests

Best practices

• Prefer E2E tests for real user flows; reserve unit tests for pure functions only
• Keep mocks simple; if you need three or more mocks, write an E2E test instead
• Test behavior and user-observable outcomes, not component internals
• Avoid unit testing React components directly; cover them via E2E tests
• Use accessible selectors (role > label > text > testid) and avoid fragile CSS selectors
• Place E2E tests under e2e/tests/ and co-locate unit tests with source for utilities

Example use cases

• Validating an order flow from catalog to confirmation with Playwright E2E tests
• Keeping unit tests for formatting helpers (e.g., formatCurrency) next to the utility code
• Replacing complicated mocked integrations with a single E2E test that exercises the real flow
• Using MSW for small loader or API-response tests instead of heavy vi.mock setups
• Organizing E2E test setup (test accounts, balances) in e2e/tests/utils.ts for reuse