Vitest + Playwright

AI writes code fast, but it will not tell you what it broke. Tests are how it finds out on its own: put "run the tests" in the definition of done in AGENTS.md, and the AI verifies every change by itself.

Two layers

• Vitest: unit tests. Verify pure functions, data transformations, and business rules. It shares Vite's config and is fast; hundreds of tests run in a second or two.
• Playwright: end-to-end tests. Launches a real browser, opens pages, clicks, and types like a user, then checks what is on screen. It is the closest thing to "it really works".

A simple split: keep logic in functions that do not depend on the UI and test them with Vitest; write one Playwright test for each critical user flow (sign-in, checkout, form submission).

Getting started

pnpm add -D vitest jsdom
pnpm create playwright

Save the souvenir below as vitest.config.ts, then add "test": "vitest run" to package.json.

Getting the AI to write good tests

• When fixing a bug, first write a failing test that reproduces it, then change the code.
• Never allow deleting tests, skipping tests, or weakening assertions to get a pass.
• Tests verify behavior, not implementation details; a refactor should not break them en masse.

Testing is only touched on here; test layers, coverage strategy, and CI are covered in depth in the Quality guardrails section.

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

// Unit tests live next to the code they test: src/**/*.test.ts(x).
// End-to-end tests live in tests/e2e and run with Playwright, not Vitest.
export default defineConfig({
  plugins: [react()],
  test: {
    include: ['src/**/*.test.{ts,tsx}'],
    // jsdom gives component tests a browser-like DOM; pure logic tests do not need it.
    environment: 'jsdom',
    // Undo vi.spyOn / vi.fn mocks after each test so tests stay independent.
    restoreMocks: true,
  },
});