Vitest + Testing Library: Writing My First Frontend Tests

Key Takeaways

1. Vitest is the obvious choice for Vite projects. No wrestling with Jest transform configs. Reuses your existing Vite setup. Jest-compatible API with minimal migration cost.

2. Testing Library tests behavior, not implementation. Query by role, interact via userEvent, verify what the user sees. Tests stay valid through refactors.

3. Async tests need waitFor. Any assertion that depends on data fetching, timeouts, or Promise resolution needs to wait. Otherwise you're checking before the async work finishes.

4. Custom hooks get renderHook. Isolated hook testing without boilerplate wrapper components. Wrap state mutations in act().

5. Define what you'll test and what you won't. User-facing behavior and business logic: yes. Internal implementation, third-party libraries, styles: no. Chasing 100% coverage on the wrong things burns time and makes tests fragile.

If you're starting from zero, don't try to test everything at once. Find the one thing that scares you most—the feature that, if it broke in production, would cause real damage—and write tests for that first. After you've watched a test catch an actual bug before it shipped, you'll never want to go without them again.