Skip to content
Flowline

Testing

Testing Setup

Terminal window
# Install testing dependencies
npm install -D vitest @testing-library/react

Writing Tests

Unit Tests

math.test.ts
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

Button.test.tsx
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

Terminal window
# Run all tests
npm test
# Run in watch mode
npm test -- --watch
# Run with coverage
npm test -- --coverage
# Run specific file
npm test -- math.test.ts

Mocking

api.test.ts
import { vi } from 'vitest';
// Mock a module
vi.mock('./api', () => ({
fetchUser: vi.fn(() => Promise.resolve({ id: 1, name: 'John' })),
}));
// Mock a function
const mockFn = vi.fn();
mockFn.mockReturnValue(42);

Test Coverage

Terminal window
npm test -- --coverage
FileStatementsBranchesFunctionsLines
math.ts100%100%100%100%
utils.ts85%75%90%85%
Total92%87%95%92%