Advanced16 min read

Advanced React Testing Strategy

Build confidence with a layered testing approach that protects behavior while keeping suites fast and maintainable.

Behavior Over Implementation

Assert what users see and can do, not internal state variables or component instance methods. Query by accessible roles and labels — if tests break when renaming a state variable but UI is unchanged, the test was wrong.

Refactoring confidence is the primary ROI of testing. Tests that encode implementation details create friction without safety.

User-visible assertions only
Roles and labels over test IDs
Tests should survive refactors

Layered Test Portfolio

Unit tests cover pure functions, reducers, formatters, and custom hooks. Integration tests render feature flows with MSW-backed API. E2E tests cover login, checkout, and critical revenue paths in real browsers.

Ratio guidance: many fast unit/integration tests, fewer slow E2E. E2E flakiness costs trust — invest in stable selectors, test data factories, and parallel isolation.

Unit for pure logic and hooks
Integration for feature flows
E2E for business-critical paths

Determinism And Speed

Mock time with fake timers for debounce and polling tests. MSW for deterministic network. Seed random data generators in tests. Avoid arbitrary waitFor timeouts — use waitFor with explicit conditions.

Parallel test runs require isolated state — unique database tenants, per-test MSW handlers, or transaction rollbacks. Shared mutable fixtures cause order-dependent failures.

Fake timers for time-dependent code
MSW for network determinism
Isolated state per test

Accessibility Testing

Integrate axe-core (jest-axe, @axe-core/playwright) in unit and E2E suites. Catch missing labels, contrast issues, and ARIA misuse automatically. Manual keyboard testing complements automation for focus traps and complex widgets.

Accessible queries in RTL (getByRole) double as a11y checks — if you cannot query it accessibly, users with assistive tech cannot use it either.

axe in CI pipelines
getByRole validates accessibility
Manual keyboard testing for complex widgets

CI and Release Confidence

Run unit and integration on every push. E2E on pull requests before merge — align with team policy requiring green Playwright before merge. Shard E2E across workers for speed.

Flaky test quarantine with ticket and deadline — never permanently skip without owner. Coverage metrics inform gaps but do not replace behavioral tests for critical paths.