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.

Testing Best Practices Guidelines for writing effective, maintainable tests that provide real confidence. Contains 6 rules focused on preferring E2E tests, minimizing mocking, and testing behavior over implementation. Core Philosophy 1. Prefer E2E tests over unit tests Test the whole system, not isolated pieces 2. Minimize mocking If you need complex mocks, write an E2E test instead 3. Test behavior, not implementation Test what users see and do 4. Avoid testing React components directly Test them through E2E When to Apply Reference these guidelines when: Deciding what type of test to write Writing new E2E or unit tests Reviewing test code Refactoring tests Rules Summary Testing Strategy (CRITICAL) prefer e2e tests @rules/prefer e2e tests.md Default to E2E tests. Only write unit tests for pure functions. avoid component tests @rules/avoid component tests.md Don't unit test React components. Test them through E2E or not at all. minimize mocking @rules/minimize mocking.md Keep mocks simple. If you need 3+ mocks, write an E2E test instead. E2E Tests (HIGH) e2e test structure @rules/e2e test structure.md E2E tests go in e2e/tests/ , not frontend/ . e2e selectors @rules/e2e selectors.md Use accessible selectors: role label text testid. Unit Tests (MEDIUM) unit test structure @rules/unit test structure.md Unit tests for pure functions only. Co locate with source files. Key Files e2e/tests/ E2E tests (Playwright) e2e/tests/utils.ts E2E test utilities vitest.config.ts Unit test configuration vitest.setup.ts Global test setup with MSW app/utils/test utils.ts Unit test utilities

frontend-testing-best-practices