{"enrichment":{"faq":[{"a":"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.","q":"How do I write vitest unit tests for React components?"},{"a":"Vitest testing with React Testing Library recommends userEvent over fireEvent because userEvent simulates realistic user interactions\u2014it 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.","q":"What's the difference between userEvent and fireEvent in vitest?"},{"a":"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.","q":"How should I handle async testing with waitFor and findBy?"},{"a":"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.","q":"What query priority should vitest tests follow?"},{"a":"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.","q":"How do I mock functions and spies with vitest?"},{"a":"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.","q":"What's the Given/When/Then pattern for vitest tests?"}],"shadow_tags":["unit-testing-framework","react-component-testing","test-query-selectors","user-interaction-testing","async-test-patterns","mock-and-spy-utilities","accessibility-first-testing","test-organization-patterns","behavior-driven-assertions","testing-best-practices"],"summary_rewrite":"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."},"files":[{"bytes":4300,"path":"skills/vitest/SKILL.md","sha256":"a9effb75bbd38acd73d12315d3b2438c61f9240e55ad38bb52ff974e0e6ac528","url":"https://skillfed.io/files/prowler-cloud/prowler/vitest/98dfd7b7/SKILL.md"}],"id":"prowler-cloud/prowler/vitest","links":{"html":"https://skillfed.io/prowler-cloud/prowler/vitest","md":"https://skillfed.io/prowler-cloud/prowler/vitest.md","repo":"https://github.com/prowler-cloud/prowler"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2285,"language":"Python","last_updated":"2026-07-27","license":"Apache-2.0","name":"vitest","publisher":"prowler-cloud","stars":14491},"relations":{"similar":[{"id":"curiositech/some_claude_skills/vitest-testing-patterns"},{"id":"DaleStudy/skills/testing"},{"id":"hieutrtr/ai1-skills/react-testing-patterns"},{"id":"nahisaho/MUSUBI/test-engineer"},{"id":"itechmeat/llm-code/react-testing-library"},{"id":"manutej/luxor-claude-marketplace/jest-react-testing"},{"id":"affaan-m/ECC/react-testing"},{"id":"jmsktm/claude-settings/testing-qa"},{"id":"bobmatnyc/claude-mpm-skills/vitest"},{"id":"majesticlabs-dev/majestic-marketplace/react-testing"}]},"slug":{"owner":"prowler-cloud","repo":"prowler","skill":"vitest"},"version":"98dfd7b7"}