testing-vitest_skill

Overview

This skill provides opinionated, practical testing patterns using Vitest and React Testing Library for modern React applications. It bundles conventions for test structure, query priorities, mocking, and coverage goals to help you write reliable, user-focused tests. Reference configuration and advanced pattern files are mandatory before making infra or mock changes.

How this skill works

The skill defines what to test (units, components, hooks, integration) and how to structure tests using Arrange-Act-Assert and descriptive test names. It prescribes query priorities (accessible roles first), mocking patterns for modules, environment variables, and router behavior, plus commands and setup actions to run tests and collect coverage. Use the provided configuration and mock reference docs before changing Vitest setup or implementing complex mocks.

When to use it

• Writing unit tests for utilities, business logic, or hooks
• Testing React components with user interactions and accessibility checks
• Creating integration tests for API routes or server actions
• Setting up test infrastructure, config, and reusable test utilities
• Establishing project-wide testing conventions and coverage goals

Best practices

• Test user behavior and visible outcomes, not internals
• Follow Arrange-Act-Assert and use descriptive it() names
• Use accessible queries (getByRole, getByLabelText) before test ids
• Mock external dependencies and environment variables, then clear mocks between tests
• Keep tests independent with beforeEach/afterEach and avoid committing .only/.skip

Example use cases

• Unit test a date formatting util including leap years and invalid inputs
• Component test a Button for text, click behavior, disabled state, and accessibility
• Integration test a login flow mocking auth client and simulating network errors
• Set up vitest config, test setup file, and npm scripts to run coverage and watch mode
• Mock Next.js router or analytics module to isolate component behavior