testing-react-with-vitest
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 | assertions | toBeInTheDocument, toBeVisible, toHaveTextContent |
Testing Philosophy
These principles are non-negotiable defaults for all React testing advice.
More from bnadlerjr/dotfiles
slicing-elephant-carpaccio
Breaks features into ultra-thin vertical slices using Elephant Carpaccio methodology. Use when planning new features, breaking down epics, slicing work across layers, or when a task spans multiple components. Produces an ordered backlog of thin slices, each independently working, testable, and demoable. Handles single-repo, monorepo, and multi-repo architectures.
14receiving-code-review
Guides technical evaluation of code review feedback before implementation. Use when receiving PR comments, review suggestions, GitHub feedback, or when asked to address reviewer feedback. Emphasizes verification and reasoned pushback over blind agreement.
13breaking-down-stories
Breaks down user stories into small, actionable tasks. Use when decomposing user stories, planning sprint work, creating task lists from tickets, or when the user mentions story breakdown, task decomposition, or sprint planning.
12mui
Material-UI component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components (@mui/material), styling with sx prop, theme customization, or MUI utilities. Supports v5, v6, and v7.
1applying-swiss-design
Applies Swiss/International Typographic Style principles to create clear, functional output. Use when designing interfaces, data visualizations, documentation, CLI output, or any output where clarity matters. Recognizes requests like "make it cleaner", "reduce clutter", "too busy", "improve readability", "visual hierarchy", "simplify the layout".
1coding-workflow
Use when user asks to build a feature, implement something new, or make significant code changes. Recognizes requests like "build", "implement", "create a new feature", "add functionality", "develop", "I need to build X", "let's implement", "new feature request", "make these changes". Orchestrates a four-stage workflow (Research → Brainstorm → Plan → Implement) using the appropriate thought pattern skill at each stage.
1