48Vitest (modern unit testing)

48.1 Why Vitest

• ESM-native, super-fast (powered by Vite)
• Jest-compatible API — easy migration
• TypeScript first-class, no Babel config
• Built-in coverage, watch mode, UI, snapshot
• Workspaces for monorepos

npm i -D vitest @vitest/coverage-v8 @vitest/ui

48.2 First test

// src/sum.test.ts
import { describe, it, expect } from 'vitest';
import { sum } from './sum';

describe('sum', () => {
  it('adds two numbers', () => {
    expect(sum(1, 2)).toBe(3);
  });
  it('handles negatives', () => {
    expect(sum(-1, -2)).toBe(-3);
  });
});

npx vitest                # watch mode by default
npx vitest run            # single run (CI)
npx vitest --ui           # interactive UI in browser
npx vitest --coverage     # with coverage

48.3 Expect API (Jest-compatible)

expect(value).toBe(x);                    // ===
expect(obj).toEqual({ a: 1 });            // deep equal
expect(obj).toMatchObject({ a: 1 });      // subset
expect(arr).toContain(x);
expect(arr).toHaveLength(3);
expect(fn).toThrow('boom');
expect(fn).toThrow(MyError);
expect(value).toBeDefined();
expect(value).toBeNull();
expect(value).toBeTruthy();
expect(value).toBeGreaterThan(5);
expect(value).toBeCloseTo(0.3, 5);        // float
expect(str).toMatch(/regex/);

// Async
await expect(promise).resolves.toBe(42);
await expect(promise).rejects.toThrow();

48.4 Mocks & spies

import { vi, expect, it } from 'vitest';

// Spy on an existing object
const logger = { info: (m: string) => m };
const spy = vi.spyOn(logger, 'info');
logger.info('hello');
expect(spy).toHaveBeenCalledWith('hello');

// Standalone mock function
const fn = vi.fn().mockReturnValue(42);
expect(fn()).toBe(42);
expect(fn).toHaveBeenCalledOnce();

// Mock a module
vi.mock('node:fs', () => ({
  readFileSync: vi.fn(() => 'mocked contents'),
}));

// Reset between tests
beforeEach(() => vi.clearAllMocks());

48.5 Fake timers

it('debounce fires once', () => {
  vi.useFakeTimers();
  const fn = vi.fn();
  const d = debounce(fn, 300);
  d(); d(); d();
  vi.advanceTimersByTime(299);
  expect(fn).not.toHaveBeenCalled();
  vi.advanceTimersByTime(1);
  expect(fn).toHaveBeenCalledOnce();
  vi.useRealTimers();
});

48.6 Snapshots

it('renders user card', () => {
  const html = render(<UserCard name="Alice" />).container.innerHTML;
  expect(html).toMatchSnapshot();
});

// Inline
expect(value).toMatchInlineSnapshot(`
  { "a": 1, "b": 2 }
`);

Run npx vitest -u to update snapshots when output changes intentionally.

48.7 React component testing

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  test: { environment: 'jsdom', setupFiles: ['./test-setup.ts'] },
});

// Button.test.tsx
import { render, screen, userEvent } from '@testing-library/react';
import { Button } from './Button';

it('fires onClick', async () => {
  const onClick = vi.fn();
  render(<Button onClick={onClick}>Buy</Button>);
  await userEvent.click(screen.getByRole('button', { name: 'Buy' }));
  expect(onClick).toHaveBeenCalledOnce();
});

48.8 Vitest vs Jest