vitest-testing-patterns
Master test writing with Vitest and React Testing Library through practical patterns for units, components, and integration scenarios. Learn mocking strategies for APIs and external dependencies, plus file organization and coverage setup.
Vitest Testing Patterns helps you write unit and component tests using Vitest and React Testing Library.
AI-generated summary based on this skill's SKILL.md
Install
curiositech/some_claude_skills/vitest-testing-patterns · repository language: TypeScript
git clone https://github.com/curiositech/some_claude_skills
cp -r some_claude_skills/.claude/skills/vitest-testing-patterns ~/.claude/skills/vitest-testing-patternsnpx skillfed install curiositech/some_claude_skills/vitest-testing-patternsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to write Vitest tests for React components?
vitest-testing-patterns teaches you to write unit and component tests using Vitest and React Testing Library. Start by importing describe, it, and expect from Vitest, then use React Testing Library's render function to mount components. Write assertions on rendered output using queries like getByRole, getByText, and getByTestId. The skill covers practical patterns for testing user interactions, state changes, and conditional rendering across real-world scenarios.
How do I mock functions in Vitest?
vitest-testing-patterns covers mocking strategies essential for isolating code under test. Use vi.fn() to create mock functions, vi.mock() for module-level mocking, and vi.spyOn() to spy on existing functions. The skill teaches you to mock APIs, databases, and external service dependencies—configure return values with mockReturnValue or mockResolvedValue for async calls. Learn when to use each pattern and how to verify mocks were called correctly with toHaveBeenCalled assertions.
What mocking patterns does Vitest support for APIs and databases?
vitest-testing-patterns provides comprehensive mocking patterns for external dependencies. Mock API calls by intercepting fetch or axios requests, then return controlled test data. For databases like Drizzle ORM, mock query builders and connection methods. Set up mocks at the module level with vi.mock() or use factory functions for test-specific configurations. The skill teaches you to organize mocks for reusability and maintain clean test isolation across unit, component, and integration tests.
How do I configure Vitest and organize test files?
vitest-testing-patterns covers Vitest environment setup and file organization best practices. Configure vitest.config.ts with test globals, environment settings (jsdom for DOM testing), and coverage thresholds. Organize tests alongside source files using .test.ts or .spec.ts naming conventions, or group them in a dedicated test directory. The skill teaches you to structure mocks, fixtures, and test utilities for maintainability and to set up coverage reporting to track test completeness.
What testing patterns and best practices does Vitest support?
vitest-testing-patterns teaches testing best practices including proper test coverage strategies, async testing patterns for promises and timers, and accessibility compliance checks. Learn to write descriptive test names, use beforeEach/afterEach hooks for setup, and organize tests with describe blocks. The skill covers timer mocking with vi.useFakeTimers(), testing accessibility with React Testing Library's accessibility queries, and integration test patterns for multi-component workflows.
Can I use Vitest to test Next.js API routes?
vitest-testing-patterns includes patterns for testing Next.js API routes with Vitest. Mock the req and res objects, then call your handler function directly or use a test client. Mock external dependencies like databases and third-party APIs that your routes depend on. The skill teaches you to verify response status codes, headers, and body content, plus how to test error handling and edge cases in your API logic.
SKILL.md
rendered from the published skill — quoted content, verbatim
Vitest Testing Patterns
This skill helps you write effective tests using Vitest and React Testing Library following project conventions.
When to Use
✅ USE this skill for: - Writing unit tests for utilities
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
.claude/skills/vitest-testing-patterns/SKILL.md