Overview

This skill adds a fast unit/component testing setup for Vite + React + TypeScript using Vitest and @testing-library/react. It emphasizes minimal configuration, jsdom environments, and quick feedback to keep development moving quickly.

How This Skill Works

Install Vitest and Testing Library, and configure Vitest inline in vite.config.ts (or via a separate vitest.config.ts). Use a jsdom environment for React tests, optionally add a setupTests.ts for global mocks and cleanup, and create a simple example test to validate the setup. The tests run with Vitest and can report coverage.

When to Use It

• You’re building a Vite + React + TS app and want fast unit tests
• You need quick feedback during development with small test suites
• You want to validate UI behavior using @testing-library/react
• You prefer minimal configuration for a clean DX
• You’re aiming to get test coverage for individual components

Quick Start

1. Step 1: Install dev dependencies for Vitest and Testing Library
2. Step 2: Add inline vitest config to vite.config.ts or create vitest.config.ts with environment: 'jsdom'
3. Step 3: Create setupTests.ts and an example test (e.g., Button.test.tsx), then run npm test

Best Practices

• Prefer Vitest for unit tests in Vite projects
• Use @testing-library/react for UI tests
• Run tests in a jsdom environment to mirror the browser
• Keep tests small, deterministic, and fast
• Add a setupTests.ts for global mocks and cleanup

Example Use Cases

• vite.config.ts includes a compact vitest config block
• setupTests.ts initializes @testing-library/jest-dom and global mocks
• A Button.test.tsx demonstrates render and user interactions
• npm run test runs vitest with coverage enabled in CI
• One-file example: src/components/Hello.test.tsx

Frequently Asked Questions