vitest
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 helps you write unit tests for React components and hooks using React Testing Library best practices.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Vitest helps you write unit tests for React components and hooks using React Testing Library best practices. 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.
Use it when
- Vitest testing with React Testing Library recommends userEvent over fireEvent because userEvent simulates realistic user interactions—it.
- Vitest's async testing patterns use waitFor to poll for state changes and findBy queries (which retry internally) for elements that appear.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
prowler-cloud/prowler/vitest · repository language: Python
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 do I write vitest unit tests for React components?
Vitest helps you write unit tests for React components using React Testing Library for querying and userEvent for interactions. Structure tests with the Given/When/Then pattern: set up your component, trigger user actions, then assert outcomes. Use describe blocks to organize related tests, and always clean up mocks with afterEach and restoreAllMocks to prevent test pollution.
What's the difference between userEvent and fireEvent in vitest?
Vitest testing with React Testing Library recommends userEvent over fireEvent because userEvent simulates realistic user interactions—it fires multiple events in sequence, like mouseDown, mouseUp, and click. fireEvent triggers single events directly, which doesn't match how users actually interact with your component. Use userEvent for accurate, accessible testing.
How should I handle async testing with waitFor and findBy?
Vitest's async testing patterns use waitFor to poll for state changes and findBy queries (which retry internally) for elements that appear after async operations. Always await these calls. Use waitFor for complex async logic and findBy for simple element waits. Pair with proper mock cleanup using afterEach to ensure tests remain isolated and predictable.
What query priority should vitest tests follow?
Vitest and React Testing Library prioritize accessible queries: getByRole first (most user-visible), then getByLabelText for form inputs, getByPlaceholderText, getByText, and getByTestId as a last resort. This hierarchy ensures your tests validate what users actually see and interact with, catching accessibility issues early.
How do I mock functions and spies with vitest?
Vitest provides vi.fn() to create mock functions and vi.spyOn() to spy on existing methods. Use vi.fn() for dependency injection and vi.spyOn() to monitor calls without replacing implementation. Always restore mocks with restoreAllMocks() in afterEach to prevent state leakage between tests and keep your test suite reliable.
What's the Given/When/Then pattern for vitest tests?
Vitest tests using Given/When/Then (AAA pattern) organize as: Given sets up initial state and renders components, When triggers user actions via userEvent, Then asserts expected outcomes. This structure clarifies intent, improves readability, and ensures tests focus on user behavior. Use describe blocks to group related Given/When/Then scenarios.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
> For E2E tests: Use prowler-test-ui skill (Playwright).
> This skill covers unit/integration tests with Vitest + React Testing Library.
Test Structure (REQUIRED)
Use Given/When/Then (AAA) pattern with comments:
it("should update user name when form is submitted", async () => {
// Given - Arrange
const user = userEvent.setup();
const onSubmit = vi.fn();
render(<UserForm onSubmit={onSubmit} />);
// When - Act
await user.type(screen.getByLabelText(/name/i), "John");
await user.click(screen.getByRole("button", { name: /submit/i }));
// Then - Assert
expect(onSubmit).toHaveBeenCalledWith({ name: "John" });
});
Describe Block
(truncated - see the full file via the links below)
File tree — 1 file
skills/vitest/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 tests for React components 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
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.
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.
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.
Prowler-ui equips you with the component patterns and design principles that power Prowler's cloud security platform. Learn the established conventions for building cohesive user interfaces and maintaining design consistency across the ecosystem. This skill bridges the gap between raw components and production-ready UI architecture.
React Testing Library guides you through writing tests that mirror real user behavior rather than internal implementation. It emphasizes querying by role, label, and text—prioritizing accessibility—and provides utilities for simulating user interactions, handling async operations, and debugging. Master query types, user events, and common patterns like custom renders and hook testing.
This skill teaches you to test React components effectively using Jest and React Testing Library. You'll learn configuration setup, query strategies, mocking techniques, async testing patterns, custom hooks testing, and integration approaches that follow user-behavior-first principles.
More skills react-testing (MIT) · Testing Qa (unlicensed) · vitest (MIT) · React Testing (NOASSERTION) · prowler-test-ui (Apache-2.0) · tdd (Apache-2.0) · prowler-test-sdk (Apache-2.0)