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
Install
prowler-cloud/prowler/vitest · repository language: Python
git clone https://github.com/prowler-cloud/prowler
cp -r prowler/skills/vitest ~/.claude/skills/vitestnpx skillfed install prowler-cloud/prowler/vitestFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/vitest/SKILL.md