Unit Testing in 2026: Vitest 3, Testing Library & TDD Patterns

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,           // No need to import describe, it, expect
    environment: 'jsdom',    // DOM environment for React
    setupFiles: './src/test/setup.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'lcov'],
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 75,
      },
    },
    css: true,               // Process CSS imports
  },
});

// src/test/setup.ts
import '@testing-library/jest-dom/vitest';

// Basic test example
import { describe, it, expect } from 'vitest';
import { formatCurrency, calculateDiscount } from './utils';

describe('formatCurrency', () => {
  it('formats USD amount with two decimals', () => {
    expect(formatCurrency(99.9, 'USD')).toBe('$99.90');
  });

  it('handles zero correctly', () => {
    expect(formatCurrency(0, 'USD')).toBe('$0.00');
  });

  it('formats INR with proper symbol', () => {
    expect(formatCurrency(1500, 'INR')).toBe('₹1,500.00');
  });
});

describe('calculateDiscount', () => {
  it('applies percentage discount', () => {
    expect(calculateDiscount(100, { type: 'percentage', value: 20 })).toBe(80);
  });

  it('never goes below zero', () => {
    expect(calculateDiscount(10, { type: 'fixed', value: 50 })).toBe(0);
  });
});

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

describe('LoginForm', () => {
  it('submits login credentials and shows success', async () => {
    const user = userEvent.setup();
    const mockLogin = vi.fn().mockResolvedValue({ success: true });
    
    render(<LoginForm onLogin={mockLogin} />);
    
    // Query by accessible role and label — like a real user
    await user.type(screen.getByLabelText(/email/i), 'ash@inkandhorizon.com');
    await user.type(screen.getByLabelText(/password/i), 'securePassword123');
    await user.click(screen.getByRole('button', { name: /sign in/i }));
    
    // Assert behavior, not implementation
    await waitFor(() => {
      expect(screen.getByText(/welcome back/i)).toBeInTheDocument();
    });
    
    expect(mockLogin).toHaveBeenCalledWith({
      email: 'ash@inkandhorizon.com',
      password: 'securePassword123',
    });
  });

  it('shows validation error for invalid email', async () => {
    const user = userEvent.setup();
    render(<LoginForm onLogin={vi.fn()} />);
    
    await user.type(screen.getByLabelText(/email/i), 'not-an-email');
    await user.click(screen.getByRole('button', { name: /sign in/i }));
    
    expect(screen.getByText(/please enter a valid email/i)).toBeInTheDocument();
  });

  it('disables submit button while loading', async () => {
    const user = userEvent.setup();
    const slowLogin = vi.fn(() => new Promise(r => setTimeout(r, 1000)));
    
    render(<LoginForm onLogin={slowLogin} />);
    
    await user.type(screen.getByLabelText(/email/i), 'ash@ih.com');
    await user.type(screen.getByLabelText(/password/i), 'pass123');
    await user.click(screen.getByRole('button', { name: /sign in/i }));
    
    expect(screen.getByRole('button', { name: /signing in/i })).toBeDisabled();
  });
});

// Mock API calls with MSW (Mock Service Worker)
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  http.get('/api/users/me', () => {
    return HttpResponse.json({
      id: 'user_123',
      name: 'Ashutosh',
      role: 'admin',
    });
  }),
  http.post('/api/posts', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: 'post_456', ...body }, { status: 201 });
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// Mock timers
describe('auto-save', () => {
  it('saves draft every 30 seconds', () => {
    vi.useFakeTimers();
    const mockSave = vi.fn();
    
    render(<Editor onAutoSave={mockSave} />);
    
    // Fast-forward 30 seconds
    vi.advanceTimersByTime(30000);
    expect(mockSave).toHaveBeenCalledTimes(1);
    
    vi.advanceTimersByTime(30000);
    expect(mockSave).toHaveBeenCalledTimes(2);
    
    vi.useRealTimers();
  });
});

// Mock modules
vi.mock('./analytics', () => ({
  trackEvent: vi.fn(),
  trackPageView: vi.fn(),
}));

import { renderHook, act, waitFor } from '@testing-library/react';
import { useDebounce } from './useDebounce';

describe('useDebounce', () => {
  it('debounces value updates', async () => {
    vi.useFakeTimers();
    
    const { result, rerender } = renderHook(
      ({ value }) => useDebounce(value, 300),
      { initialProps: { value: '' } }
    );
    
    // Initial value
    expect(result.current).toBe('');
    
    // Update value — debounced value should NOT change yet
    rerender({ value: 'hello' });
    expect(result.current).toBe(''); // Still empty
    
    // Fast-forward 300ms
    act(() => { vi.advanceTimersByTime(300); });
    expect(result.current).toBe('hello'); // Now updated
    
    vi.useRealTimers();
  });
});

// Pure function tests — no React needed
import { validateEmail, parseQueryString, slugify } from './utils';

describe('validateEmail', () => {
  it.each([
    ['ash@inkandhorizon.com', true],
    ['user@domain.co.in', true],
    ['invalid', false],
    ['@domain.com', false],
    ['user@', false],
  ])('validates %s → %s', (email, expected) => {
    expect(validateEmail(email)).toBe(expected);
  });
});

describe('slugify', () => {
  it.each([
    ['Hello World', 'hello-world'],
    ['React 19 Server Components', 'react-19-server-components'],
    ['TypeScript & JavaScript', 'typescript-javascript'],
  ])('slugifies "%s" → "%s"', (input, expected) => {
    expect(slugify(input)).toBe(expected);
  });
});