Testing
Testing Setup
# Install testing dependenciesnpm install -D vitest @testing-library/reactWriting Tests
Unit Tests
import { describe, it, expect } from 'vitest';import { add, multiply } from './math';
describe('math utilities', () => { it('adds two numbers', () => { expect(add(2, 3)).toBe(5); });
it('multiplies two numbers', () => { expect(multiply(4, 5)).toBe(20); });});Component Tests
import { render, screen, fireEvent } from '@testing-library/react';import { Button } from './Button';
describe('Button', () => { it('renders with text', () => { render(<Button>Click me</Button>); expect(screen.getByText('Click me')).toBeInTheDocument(); });
it('calls onClick when clicked', () => { const handleClick = vi.fn(); render(<Button onClick={handleClick}>Click</Button>);
fireEvent.click(screen.getByText('Click')); expect(handleClick).toHaveBeenCalledOnce(); });});Running Tests
# Run all testsnpm test
# Run in watch modenpm test -- --watch
# Run with coveragenpm test -- --coverage
# Run specific filenpm test -- math.test.tsMocking
import { vi } from 'vitest';
// Mock a modulevi.mock('./api', () => ({ fetchUser: vi.fn(() => Promise.resolve({ id: 1, name: 'John' })),}));
// Mock a functionconst mockFn = vi.fn();mockFn.mockReturnValue(42);Test Coverage
npm test -- --coverage| File | Statements | Branches | Functions | Lines |
|---|---|---|---|---|
| math.ts | 100% | 100% | 100% | 100% |
| utils.ts | 85% | 75% | 90% | 85% |
| Total | 92% | 87% | 95% | 92% |