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
Decision gist · record as of 2026-07-14
Vitest Testing Patterns helps you write unit and component tests using Vitest and React Testing Library. 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.
Use it when
- vitest-testing-patterns covers mocking strategies essential for isolating code under test.
- vitest-testing-patterns provides comprehensive mocking patterns for external dependencies.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
curiositech/some_claude_skills/vitest-testing-patterns · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
.claude/skills/vitest-testing-patterns/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write unit and component tests using Vitest and React Testing Library”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill guides you through unit testing React components, hooks, and utilities with Vitest and React Testing Library. It enforces the Given/When/Then pattern, prioritizes accessible queries like getByRole, and requires userEvent for realistic interactions. Learn proper async handling, mocking strategies, and what to avoid when testing user-visible behavior.
Vitest is a next-generation test framework powered by Vite, delivering rapid test execution through HMR and native ESM support. It offers built-in TypeScript integration, Jest-compatible APIs for easy migration, and component testing for React and Vue projects.
This skill streamlines Jest configuration for TypeScript projects, handling setup automation and intelligent toolchain detection. It integrates with Claude's multi-agent ecosystem to accelerate test infrastructure deployment across diverse development stacks.
Test Quality guides you through writing maintainable Java tests using JUnit 5 and AssertJ. It covers the Arrange-Act-Assert pattern, collection and exception assertions, nested test organization, and parameterized testing to improve code coverage and test readability.
Master Testing Library and Vitest patterns for React components, custom hooks, and async workflows. This skill covers behavior-driven testing with userEvent, MSW for API mocking, renderHook for custom logic, and jest-axe for accessibility audits—everything except E2E tests and TDD enforcement.
Master React Testing Library fundamentals through accessibility-first query selection, user-centric event simulation, and async handling patterns. Learn when to use getByRole, userEvent, and findBy queries, plus common pitfalls to avoid in component testing.
More skills webapp-testing (MIT)