vitest

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

```bash

npm install --save-dev vitest

npm install --save-dev @vitest/ui

npm install --save-dev @testing-library/react @testing-library/jest-dom

```

```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();

});

```

```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);

});

});

```

```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(Click me);

expect(screen.getByText('Click me')).toBeInTheDocument();

});

it('handles click events', async () => {

const handleClick = vi.fn();

render(Click);

await userEvent.click(screen.getByText('Click'));

expect(handleClick).toHaveBeenCalledOnce();

});

});

```

```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' }),

}));

```

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

• Documentation: https://vitest.dev
• GitHub: https://github.com/vitest-dev/vitest