javascript-testing-patterns

Configure vitest.config.ts with globals, environment, and coverage settings, then write tests using describe, it, and expect blocks. Follow the AAA pattern (Arrange, Act, Assert) and test both success paths and error cases like thrown exceptions.

Vitest offers faster execution and native Vite integration with a Jest-compatible API, making it ideal for Vite-based projects. Jest with ts-jest remains a full-featured choice for established projects; both support coverage thresholds and setup files.

Assign vi.fn() to global.fetch and use mockResolvedValueOnce to return fake responses per test. Verify calls with toHaveBeenCalledWith and clear mocks in beforeEach to keep tests isolated.

Render the component with render(), query elements using semantic queries like getByRole or getByPlaceholderText, and simulate events with fireEvent. Assert on rendered output and callback invocations rather than implementation details.

Use vi.useFakeTimers() to replace real timers, then call vi.advanceTimersByTime() to simulate elapsed time deterministically. Restore real timers with vi.useRealTimers() after the test to avoid side effects.

Snapshot tests catch unintended UI changes but break on any markup update, creating noisy diffs that reviewers may blindly accept. Use them sparingly for stable components and prefer explicit behavioral assertions for critical logic.