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
1npm install --save-dev vitest
2npm install --save-dev @vitest/ui
3npm install --save-dev @testing-library/react @testing-library/jest-dom

Configuration

typescript
1// vitest.config.ts
2import { defineConfig } from 'vitest/config';
3import react from '@vitejs/plugin-react';
4
5export default defineConfig({
6  plugins: [react()],
7  test: {
8    globals: true,
9    environment: 'jsdom',
10    setupFiles: './src/test/setup.ts',
11    coverage: {
12      provider: 'v8',
13      reporter: ['text', 'html', 'json'],
14    },
15  },
16});

Setup File

typescript
1// src/test/setup.ts
2import { expect, afterEach } from 'vitest';
3import { cleanup } from '@testing-library/react';
4import * as matchers from '@testing-library/jest-dom/matchers';
5
6expect.extend(matchers);
7
8afterEach(() => {
9  cleanup();
10});

Basic Tests

typescript
1import { describe, it, expect } from 'vitest';
2
3describe('Math functions', () => {
4  it('adds numbers', () => {
5    expect(1 + 1).toBe(2);
6  });
7
8  it('multiplies numbers', () => {
9    const result = 2 * 3;
10    expect(result).toEqual(6);
11  });
12});

Testing React Components

typescript
1import { render, screen } from '@testing-library/react';
2import { describe, it, expect } from 'vitest';
3import { Button } from './Button';
4
5describe('Button', () => {
6  it('renders with text', () => {
7    render(<Button>Click me</Button>);
8    expect(screen.getByText('Click me')).toBeInTheDocument();
9  });
10
11  it('handles click events', async () => {
12    const handleClick = vi.fn();
13    render(<Button onClick={handleClick}>Click</Button>);
14
15    await userEvent.click(screen.getByText('Click'));
16    expect(handleClick).toHaveBeenCalledOnce();
17  });
18});

Mocking

typescript
1import { vi } from 'vitest';
2
3// Mock function
4const mockFn = vi.fn();
5mockFn('hello');
6expect(mockFn).toHaveBeenCalledWith('hello');
7
8// Mock return value
9const mockFn = vi.fn().mockReturnValue(42);
10expect(mockFn()).toBe(42);
11
12// Mock async function
13const mockFn = vi.fn().mockResolvedValue('data');
14const result = await mockFn();
15expect(result).toBe('data');
16
17// Mock module
18vi.mock('./api', () => ({
19  fetchCertificate: vi.fn().mockResolvedValue({ id: '1', subject: 'CN=test' }),
20}));

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