Vitest how-to

Unit tests for pure helpers and small logic. Browser journeys use Playwright.

Install

pnpm add -D vitest

Config: vitest.config.mts (Node environment; colocated *.test.ts).

Commands

pnpm test
pnpm run test:watch
pnpm exec vitest run path/to/file.test.ts
pnpm exec vitest run -t "partial name"

Implementation examples

Config

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'node',
    include: ['lib/**/*.test.ts', 'hooks/**/*.test.ts', 'components/**/*.test.ts', 'config/**/*.test.ts'],
    exclude: ['node_modules', '.next', 'e2e'],
  },
});

Colocated test

// components/AutoFitGrid.test.ts
import { describe, expect, it } from 'vitest';
import { normalizeAutoFitCssLength } from './AutoFitGrid';

describe('normalizeAutoFitCssLength', () => {
  it('appends px to unitless numbers', () => {
    expect(normalizeAutoFitCssLength('140')).toBe('140px');
  });
});

Scripts

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "check:unit": "pnpm run check && pnpm test"
  }
}

TDD for bug fixes

1. Write a failing test.
2. Confirm vitest run fails.
3. Smallest production fix until green.