Vitest
Expert guidance for Vitest testing framework including unit tests, integration tests, mocking, coverage, React Testing Library integration, and TypeScript testing. Use this when writing tests for Vite-based applications.
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- GitHub stars: 1
- Updated: 2025-11-21
Download the latest version (v1.0.0) from this page.
SKILL.md
---
name: Vitest
description: Expert guidance for Vitest testing framework including unit tests, integration tests, mocking, coverage, React Testing Library integration, and TypeScript testing. Use this when writing tests for Vite-based applications.
---
# Vitest
Expert assistance with Vitest - Blazing fast unit test framework.
## Overview
Vitest is a Vite-native testing framework:
- **Fast**: Powered by Vite, instant HMR
- **Compatible**: Jest-compatible API
- **TypeScript**: First-class TypeScript support
- **Coverage**: Built-in coverage with v8/istanbul
- **UI**: Beautiful UI for test results
## Installation
```bash
npm install --save-dev vitest
npm install --save-dev @vitest/ui
npm install --save-dev @testing-library/react @testing-library/jest-dom
```
## Configuration
```typescript
// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts',
coverage: {
provider: 'v8',
reporter: ['text', 'html', 'json'],
},
},
});
```
### Setup File
```typescript
// src/test/setup.ts
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import * as matchers from '@testing-library/jest-dom/matchers';
expect.extend(matchers);
afterEach(() => {
cleanup();
});
```
## Basic Tests
```typescript
import { describe, it, expect } from 'vitest';
describe('Math functions', () => {
it('adds numbers', () => {
expect(1 + 1).toBe(2);
});
it('multiplies numbers', () => {
const result = 2 * 3;
expect(result).toEqual(6);
});
});
```
## Testing React Components
```typescript
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Button } from './Button';
describe('Button', () => {
it('renders with text', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});
it('handles click events', async () => {
const handleClick = vi.fn();
render(<Button onClick={handleClick}>Click</Button>);
await userEvent.click(screen.getByText('Click'));
expect(handleClick).toHaveBeenCalledOnce();
});
});
```
## Mocking
```typescript
import { vi } from 'vitest';
// Mock function
const mockFn = vi.fn();
mockFn('hello');
expect(mockFn).toHaveBeenCalledWith('hello');
// Mock return value
const mockFn = vi.fn().mockReturnValue(42);
expect(mockFn()).toBe(42);
// Mock async function
const mockFn = vi.fn().mockResolvedValue('data');
const result = await mockFn();
expect(result).toBe('data');
// Mock module
vi.mock('./api', () => ({
fetchCertificate: vi.fn().mockResolvedValue({ id: '1', subject: 'CN=test' }),
}));
```
## Best Practices
1. **Describe Blocks**: Group related tests
2. **Clear Names**: Write descriptive test names
3. **AAA Pattern**: Arrange, Act, Assert
4. **One Assertion**: Test one thing at a time
5. **Mock External**: Mock external dependencies
6. **Coverage**: Aim for high coverage
7. **Fast Tests**: Keep tests fast
8. **Isolation**: Tests should be independent
9. **User Events**: Use userEvent over fireEvent
10. **Accessibility**: Test with accessible queries
## Resources
- Documentation: https://vitest.dev
- GitHub: https://github.com/vitest-dev/vitest