testing-react-with-vitest

name

testing-react-with-vitest

description

Expert guidance for writing Vitest tests for React applications using React Testing Library. Covers component tests, custom hooks, utility tests, sociable testing philosophy, and the RTL query priority system. Favors sociable tests over heavy mocking, stubs over mocks. Use when working with .test.ts/.test.tsx files, vitest.config.ts, React Testing Library, @testing-library/user-event, @testing-library/jest-dom, renderHook, or when discussing React testing patterns, component testing, hook testing, or test organization.

Testing React with Vitest

Expert guidance for writing great Vitest tests for React applications using React Testing Library.

Quick Start

Testing...	Reference File	Key Topics
Core Vitest setup, matchers, spies	core-vitest	describe, it, expect, vi.fn, vi.mock, timers
RTL queries, render, screen	react-testing-library	render, screen, queries, waitFor, debug
User interactions	user-event	setup, click, type, keyboard, async events
Sociable tests, stubs, boundaries	sociable-testing	Real components, stub boundaries, functional core
Custom hooks with renderHook	custom-hooks	renderHook, act, providers, cleanup
Component testing patterns	component-patterns	Forms, modals, lists, error boundaries, a11y
jest-dom assertion matchers