Vitest for Small Business: A 2-10 Person Engineering Team Testing Playbook

pnpm add -D vitest @vitest/coverage-v8 @vitest/ui jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import { fileURLToPath } from 'node:url'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./tests/setup.ts'],
    include: ['src/**/*.{test,spec}.{ts,tsx}', 'tests/**/*.{test,spec}.ts'],
    exclude: ['**/node_modules/**', '**/dist/**', '**/e2e/**'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json-summary', 'html', 'lcov'],
      reportsDirectory: './coverage',
      include: ['src/**/*.{ts,tsx}'],
      exclude: [
        'src/**/*.d.ts',
        'src/**/*.stories.tsx',
        'src/main.tsx',
        'src/vite-env.d.ts',
      ],
      thresholds: {
        // SMB-realistic floors. Adjust upward over time.
        lines: 60,
        functions: 60,
        branches: 55,
        statements: 60,
        // Per-file overrides for the revenue paths.
        'src/payments/**': { lines: 90, functions: 90, branches: 85, statements: 90 },
        'src/auth/**': { lines: 85, functions: 85, branches: 80, statements: 85 },
      },
    },
    pool: 'threads',
    poolOptions: {
      threads: { singleThread: false, isolate: true },
    },
    testTimeout: 10_000,
    hookTimeout: 10_000,
    reporters: process.env.GITHUB_ACTIONS
      ? ['default', 'github-actions']
      : ['default'],
  },
})

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    projects: [
      {
        extends: true,
        test: {
          name: 'portal',
          root: './apps/portal',
          environment: 'jsdom',
          setupFiles: ['./apps/portal/tests/setup.ts'],
          include: ['apps/portal/src/**/*.test.{ts,tsx}'],
        },
      },
      {
        extends: true,
        test: {
          name: 'marketing',
          root: './apps/marketing',
          environment: 'jsdom',
          include: ['apps/marketing/src/**/*.test.{ts,tsx}'],
        },
      },
      {
        extends: true,
        test: {
          name: 'ui-package',
          root: './packages/ui',
          environment: 'jsdom',
          include: ['packages/ui/src/**/*.test.{ts,tsx}'],
        },
      },
      {
        extends: true,
        test: {
          name: 'node-api',
          root: './apps/api',
          environment: 'node',
          include: ['apps/api/src/**/*.test.ts'],
        },
      },
    ],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json-summary', 'lcov'],
    },
  },
})

import '@testing-library/jest-dom/vitest'
import { cleanup } from '@testing-library/react'
import { afterEach, vi } from 'vitest'

// Reset DOM after every test.
afterEach(() => {
  cleanup()
})

// Predictable timers and randomness for snapshot stability.
beforeEach(() => {
  vi.setSystemTime(new Date('2026-01-01T00:00:00Z'))
})

// Polyfills for jsdom that real browsers ship by default.
class ResizeObserverMock {
  observe() {}
  unobserve() {}
  disconnect() {}
}
globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver

if (!('IntersectionObserver' in globalThis)) {
  class IntersectionObserverMock {
    observe() {}
    unobserve() {}
    disconnect() {}
    takeRecords() { return [] }
    root = null
    rootMargin = ''
    thresholds = []
  }
  globalThis.IntersectionObserver = IntersectionObserverMock as unknown as typeof IntersectionObserver
}

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "test:ui": "vitest --ui",
    "test:cov": "vitest run --coverage",
    "test:ci": "vitest run --coverage --reporter=default --reporter=github-actions",
    "test:browser": "vitest run --project=portal --browser.enabled --browser.name=chromium"
  }
}

// src/payments/stripe-webhook.ts
import Stripe from 'stripe'
import { recordPayment, hasProcessedEvent } from './ledger'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function handleStripeWebhook(
  rawBody: string,
  signature: string,
  endpointSecret: string,
) {
  const event = stripe.webhooks.constructEvent(rawBody, signature, endpointSecret)

```ts
// src/payments/stripe-webhook.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest'
import Stripe from 'stripe'
import { handleStripeWebhook } from './stripe-webhook'
import * as ledger from './ledger'

vi.mock('./ledger', () => ({
  recordPayment: vi.fn(),
  hasProcessedEvent: vi.fn(),
}))

const SECRET = 'whsec_test_xxx'
const stripe = new Stripe('sk_test_xxx')

function signedPayload(payload: object) {
  const body = JSON.stringify(payload)
  const header = stripe.webhooks.generateTestHeaderString({
    payload: body,
    secret: SECRET,
  })
  return { body, header }
}

describe('handleStripeWebhook (revenue path)', () => {
  beforeEach(() => {
    vi.mocked(ledger.hasProcessedEvent).mockResolvedValue(false)
    vi.mocked(ledger.recordPayment).mockResolvedValue(undefined)
  })

  it('records a paid checkout once', async () => {
    const { body, header } = signedPayload({
      id: 'evt_1',
      type: 'checkout.session.completed',
      data: { object: { id: 'cs_1', amount_total: 4900, currency: 'usd', customer_email: '[email protected]' } },
    })
    const result = await handleStripeWebhook(body, header, SECRET)
    expect(result).toEqual({ ok: true })
    expect(ledger.recordPayment).toHaveBeenCalledWith({
      eventId: 'evt_1',
      sessionId: 'cs_1',
      amount: 4900,
      currency: 'usd',
      customerEmail: '[email protected]',
    })
  })

  it('rejects an unsigned or wrongly-signed payload', async () => {
    const body = JSON.stringify({ id: 'evt_2', type: 'checkout.session.completed' })
    await expect(
      handleStripeWebhook(body, 't=1,v1=deadbeef', SECRET),
    ).rejects.toThrow()
    expect(ledger.recordPayment).not.toHaveBeenCalled()
  })

  it('is idempotent on Stripe retry (same event id)', async () => {
    vi.mocked(ledger.hasProcessedEvent).mockResolvedValueOnce(true)
    const { body, header } = signedPayload({
      id: 'evt_3',
      type: 'checkout.session.completed',
      data: { object: { id: 'cs_3', amount_total: 4900, currency: 'usd' } },
    })
    const result = await handleStripeWebhook(body, header, SECRET)
    expect(result).toEqual({ ok: true, deduped: true })
    expect(ledger.recordPayment).not.toHaveBeenCalled()
  })

  it('ignores event types we do not handle yet', async () => {
    const { body, header } = signedPayload({
      id: 'evt_4',
      type: 'invoice.payment_failed',
      data: { object: { id: 'in_4' } },
    })
    const result = await handleStripeWebhook(body, header, SECRET)
    expect(result).toEqual({ ok: true, ignored: 'invoice.payment_failed' })
    expect(ledger.recordPayment).not.toHaveBeenCalled()
  })
})

// src/internal/contacts/contact-actions.ts
import type { Contact } from './types'
import { db } from '@/db'

export async function softDeleteContact(id: string, actorId: string) {
  return db.contact.update({
    where: { id },
    data: { deletedAt: new Date(), deletedBy: actorId },
  })
}

export async function restoreContact(id: string) {
  return db.contact.update({
    where: { id },
    data: { deletedAt: null, deletedBy: null },
  })
}

export async function listActiveContacts(): Promise<Contact[]> {
  return db.contact.findMany({ where: { deletedAt: null } })
}

// src/internal/contacts/contact-actions.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { softDeleteContact, restoreContact, listActiveContacts } from './contact-actions'
import { db } from '@/db'

vi.mock('@/db', () => ({
  db: {
    contact: {
      update: vi.fn(),
      findMany: vi.fn(),
    },
  },
}))

describe('contact lifecycle (internal CRUD)', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date('2026-05-20T10:00:00Z'))
  })

  it('soft-deletes a contact and stamps actor + timestamp', async () => {
    vi.mocked(db.contact.update).mockResolvedValue({ id: 'c1', deletedAt: new Date() } as never)
    await softDeleteContact('c1', 'user-7')
    expect(db.contact.update).toHaveBeenCalledWith({
      where: { id: 'c1' },
      data: { deletedAt: new Date('2026-05-20T10:00:00Z'), deletedBy: 'user-7' },
    })
  })

  it('restores a soft-deleted contact by clearing the tombstone fields', async () => {
    vi.mocked(db.contact.update).mockResolvedValue({ id: 'c1', deletedAt: null } as never)
    await restoreContact('c1')
    expect(db.contact.update).toHaveBeenCalledWith({
      where: { id: 'c1' },
      data: { deletedAt: null, deletedBy: null },
    })
  })

  it('excludes soft-deleted rows from the active list', async () => {
    vi.mocked(db.contact.findMany).mockResolvedValue([
      { id: 'a', deletedAt: null },
      { id: 'b', deletedAt: null },
    ] as never)
    const rows = await listActiveContacts()
    expect(rows).toHaveLength(2)
    expect(db.contact.findMany).toHaveBeenCalledWith({ where: { deletedAt: null } })
  })
})

// src/marketing/lead-form.tsx
import { useState } from 'react'

export type LeadInput = { name: string; email: string; companySize: '1-9' | '10-49' | '50+' }

export function validateLead(input: Partial<LeadInput>): { ok: true; value: LeadInput } | { ok: false; errors: Record<string, string> } {
  const errors: Record<string, string> = {}
  if (!input.name || input.name.trim().length < 2) errors.name = 'Name is required'
  if (!input.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.email)) errors.email = 'Valid email required'
  if (!input.companySize || !['1-9', '10-49', '50+'].includes(input.companySize)) errors.companySize = 'Select a company size'
  if (Object.keys(errors).length > 0) return { ok: false, errors }
  return { ok: true, value: input as LeadInput }
}

export function LeadForm({ onSubmit }: { onSubmit: (lead: LeadInput) => Promise<void> }) {
  const [data, setData] = useState<Partial<LeadInput>>({})
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

  async function handle(e: React.FormEvent) {
    e.preventDefault()
    const r = validateLead(data)
    if (!r.ok) { setErrors(r.errors); return }
    setSubmitting(true)
    try { await onSubmit(r.value) } finally { setSubmitting(false) }
  }

  return (
    <form onSubmit={handle} noValidate>
      <label htmlFor="name">Name</label>
      <input id="name" value={data.name ?? ''} onChange={(e) => setData({ ...data, name: e.target.value })} />
      {errors.name && <p role="alert">{errors.name}</p>}

      <label htmlFor="email">Email</label>
      <input id="email" type="email" value={data.email ?? ''} onChange={(e) => setData({ ...data, email: e.target.value })} />
      {errors.email && <p role="alert">{errors.email}</p>}

      <label htmlFor="size">Company size</label>
      <select id="size" value={data.companySize ?? ''} onChange={(e) => setData({ ...data, companySize: e.target.value as LeadInput['companySize'] })}>
        <option value="">Select...</option>
        <option value="1-9">1-9</option>
        <option value="10-49">10-49</option>
        <option value="50+">50+</option>
      </select>
      {errors.companySize && <p role="alert">{errors.companySize}</p>}

      <button type="submit" disabled={submitting}>{submitting ? 'Sending...' : 'Get the demo'}</button>
    </form>
  )
}

// src/marketing/lead-form.test.tsx
import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { LeadForm, validateLead } from './lead-form'

describe('validateLead (pure)', () => {
  it.each([
    [{}, ['name', 'email', 'companySize']],
    [{ name: 'A' }, ['name', 'email', 'companySize']],
    [{ name: 'Ada Lovelace', email: 'not-an-email' }, ['email', 'companySize']],
    [{ name: 'Ada', email: '[email protected]', companySize: '1-9' as const }, []],
  ])('returns expected error keys for %j', (input, expectedErrorKeys) => {
    const r = validateLead(input)
    if (expectedErrorKeys.length === 0) {
      expect(r.ok).toBe(true)
    } else {
      expect(r.ok).toBe(false)
      if (!r.ok) expect(Object.keys(r.errors).sort()).toEqual(expectedErrorKeys.sort())
    }
  })
})

describe('<LeadForm />', () => {
  it('blocks submit when fields are empty and shows three errors', async () => {
    const onSubmit = vi.fn()
    render(<LeadForm onSubmit={onSubmit} />)
    await userEvent.click(screen.getByRole('button', { name: /get the demo/i }))
    expect(await screen.findAllByRole('alert')).toHaveLength(3)
    expect(onSubmit).not.toHaveBeenCalled()
  })

  it('submits a clean lead and disables the button while sending', async () => {
    const onSubmit = vi.fn().mockImplementation(() => new Promise((r) => setTimeout(r, 50)))
    render(<LeadForm onSubmit={onSubmit} />)
    await userEvent.type(screen.getByLabelText(/name/i), 'Ada Lovelace')
    await userEvent.type(screen.getByLabelText(/email/i), '[email protected]')
    await userEvent.selectOptions(screen.getByLabelText(/company size/i), '10-49')
    await userEvent.click(screen.getByRole('button', { name: /get the demo/i }))
    expect(onSubmit).toHaveBeenCalledWith({ name: 'Ada Lovelace', email: '[email protected]', companySize: '10-49' })
    expect(screen.getByRole('button')).toBeDisabled()
  })
})

// src/auth/require-role.ts
export type Session = { userId: string; role: 'admin' | 'staff' | 'viewer' } | null

export class ForbiddenError extends Error { constructor() { super('forbidden') } }
export class UnauthorisedError extends Error { constructor() { super('unauthorised') } }

const HIERARCHY: Record<NonNullable<Session>['role'], number> = { viewer: 1, staff: 2, admin: 3 }

export function requireRole(session: Session, minRole: NonNullable<Session>['role']) {
  if (!session) throw new UnauthorisedError()
  if (HIERARCHY[session.role] < HIERARCHY[minRole]) throw new ForbiddenError()
  return session
}

// src/auth/require-role.test.ts
import { describe, it, expect } from 'vitest'
import { requireRole, ForbiddenError, UnauthorisedError } from './require-role'

describe('requireRole', () => {
  it('throws UnauthorisedError when there is no session', () => {
    expect(() => requireRole(null, 'viewer')).toThrow(UnauthorisedError)
  })

  it.each([
    [{ userId: 'u', role: 'viewer' as const }, 'staff', ForbiddenError],
    [{ userId: 'u', role: 'staff' as const }, 'admin', ForbiddenError],
  ])('rejects %j when min role is %s', (session, min, err) => {
    expect(() => requireRole(session, min as any)).toThrow(err)
  })

  it.each([
    [{ userId: 'u', role: 'admin' as const }, 'admin'],
    [{ userId: 'u', role: 'admin' as const }, 'viewer'],
    [{ userId: 'u', role: 'staff' as const }, 'viewer'],
  ])('allows %j when min role is %s', (session, min) => {
    expect(requireRole(session, min as any)).toEqual(session)
  })
})

name: test

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

concurrency:
  group: test-${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  vitest:
    runs-on: ubuntu-latest
    timeout-minutes: 8
    permissions:
      contents: read
      pull-requests: write

steps:
  - uses: actions/checkout@v4

  - name: Setup pnpm
    uses: pnpm/action-setup@v4
    with:
      version: 9

  - name: Setup Node
    uses: actions/setup-node@v4
    with:
      node-version: '20'
      cache: 'pnpm'

  - name: Install
    run: pnpm install --frozen-lockfile

  - name: Cache Vitest
    uses: actions/cache@v4
    with:
      path: node_modules/.vitest
      key: vitest-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ hashFiles('vitest.config.ts') }}
      restore-keys: |
        vitest-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-
        vitest-${{ runner.os }}-

  - name: Run tests (with coverage)
    run: pnpm test:ci
    env:
      CI: true

  - name: Upload coverage summary
    if: always()
    uses: actions/upload-artifact@v4
    with:
      name: coverage-${{ github.run_id }}
      path: coverage/
      retention-days: 7

  - name: Comment coverage on PR
    if: github.event_name == 'pull_request'
    uses: davelosert/vitest-coverage-report-action@v2
    with:
      json-summary-path: ./coverage/coverage-summary.json

Six properties that matter at SMB scale:

1. **`concurrency.cancel-in-progress: true`** kills the previous run on the same branch when a new push lands. Your "I noticed a typo and pushed three more commits" stops billing four runs.
2. **`timeout-minutes: 8`** is a hard cap. If something goes wrong (a hung browser, an infinite loop) you do not burn an hour.
3. **pnpm cache via `setup-node` + Vitest cache via `actions/cache`** drop install time from ~80s to ~12s and test time from ~70s to ~35s on a steady-state codebase.
4. **`--reporter=github-actions`** in `test:ci` (from the package.json above) puts failures as inline annotations on the PR file diff. No clicking through logs.
5. **`coverage-summary.json` posted as a PR comment** gives the team a delta on coverage per PR. This is the visible feedback loop that makes coverage thresholds actually move over time.
6. **`retention-days: 7`** on the artifact keeps storage usage low. The free tier on storage is small; default 90 days will blow it up.

### Free-tier math, worked

- 3 devs × 6 PRs/week × 2 runs/PR (push + open) = 36 runs/week
- × ~2 min/run after caches warm = 72 min/week
- × 4.3 weeks/month = ~310 min/month
- Leaves ~1,690 min of the 2,000-min free tier for deploys, scheduled jobs, and the occasional cache-miss run

If you crack 1,000 min/month, look at: a) running tests only on touched packages via `pnpm vitest --changed`, b) splitting browser-mode into a manually-triggered workflow, c) skipping CI on `docs/**` paths only via `paths-ignore`.

---

### Test ROI math: when 3 devs × 6 weeks pays for itself

Most SMB tech leads do not have a model for whether testing pays. Here is one. Plug in your numbers; the structure is what matters.

### Inputs

- **Devs:** 3
- **Avg fully-loaded hourly cost per dev:** $90
- **Hours per dev per week to write/maintain tests (steady state):** 2
- **Bugs caught per week by tests (steady state, weeks 6+):** 1.5
- **Avg hours per incident (detect + diagnose + fix + customer comms):** 5
- **Stripe / auth incidents avoided per quarter:** 1
- **Avg revenue impact per Stripe/auth incident:** $4,000

### Costs (weekly, weeks 1-5 ramp; weeks 6+ steady state)

- Weeks 1-5: 3 devs × 5 hours/week × $90 = **$1,350/week** (writing the initial 40-test corpus)
- Weeks 6+: 3 devs × 2 hours/week × $90 = **$540/week** (maintenance)

### Benefits (weekly, weeks 6+)

- Bugs caught: 1.5 × 5 hours × $90 = **$675/week** in saved engineering hours
- Stripe/auth incident avoided: 1 per quarter × $4,000 / 13 = **$308/week** in revenue protection

### Break-even

- 5-week ramp cost: 5 × $1,350 = **$6,750**
- Steady-state net benefit: $675 + $308 - $540 = **$443/week**
- Payback: $6,750 / $443 = **15.2 weeks from start of writing tests** (~10 weeks from steady state).

Three-month payback in real money, ignoring the much larger long-tail benefit (faster onboarding, lower bus factor, fewer Sunday-night rollbacks, the ability to ship on a Friday without fear). The first 40 tests are the only ones that matter for the math; you do not need 90% coverage to break even.

### Where the math goes wrong

- You write tests that test the framework, not your business logic. Symptom: a refactor breaks every test. Fix: test behaviour, not implementation. Re-read the four scenarios above.
- You skip CI because "the team will just run tests locally." Two months in, three engineers are running three different test commands and main is broken. Fix: enforce `test:ci` in a required status check on the protected branch.
- You set the coverage threshold so low that the file you care about is allowed to drop. Fix: per-path thresholds (above) make `src/payments` and `src/auth` non-negotiable.

---

## Handoff-friendly test patterns (and the README template)

The single biggest hidden cost in SMB engineering is what happens when your most senior person leaves. You inherit a codebase you do not understand. Tests are the cheapest form of institutional memory you can buy, if you write them right.

### Rule 1: Every `it()` reads as a sentence

Bad:
```ts
it('test 1', () => { ... })
it('works', () => { ... })

it('records a paid checkout once', () => { ... })
it('is idempotent on Stripe retry (same event id)', () => { ... })

# Testing playbook

## What's tested
- **Revenue paths (`src/payments`, `src/auth`):** 85-90% coverage, behaviour tests.
- **Internal CRUD (`src/internal`):** 60% coverage, happy-path + soft-delete + restore.
- **Marketing forms (`src/marketing/lead-form`):** 100% on the validator, ~70% on the component.

## What's intentionally NOT tested
- **Marketing CMS rendering** (`src/marketing/blog`): content-driven, low blast radius.
- **Storybook stories**: design artefacts, not behaviour.
- **Third-party SDK internals**: we mock Stripe/Postmark at the SDK boundary.

## What to test next (priority order)
1. Refund handler (`src/payments/refunds.ts`): currently untested, high blast radius.
2. Magic-link expiry edge case (`src/auth/magic-link.ts`): untested, security-adjacent.
3. CSV import error reporting (`src/internal/import/csv.ts`): flaky in production.

## How to run
- Local watch: `pnpm test`
- Local UI: `pnpm test:ui`
- Coverage: `pnpm test:cov`
- CI mode (what Actions runs): `pnpm test:ci`

## How to add a test
1. Co-locate next to the file under test.
2. `describe` by domain noun.
3. `it` reads as a sentence.
4. Mock at the SDK boundary, not the helper boundary.
5. Use `it.each` for parameterised cases.

## Who to ask
- Payments tests: @lead-eng
- Auth tests: @lead-eng
- Marketing/forms: @frontend-eng

pnpm add -D @vitest/browser playwright

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

export default defineConfig({
  plugins: [react()],
  test: {
    name: 'portal-browser',
    include: ['src/portal/**/*.browser.test.{ts,tsx}'],
    browser: {
      enabled: true,
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
      headless: true,
    },
  },
})

// src/portal/dashboard.browser.test.tsx
import { describe, it, expect } from 'vitest'
import { render } from 'vitest-browser-react'
import { Dashboard } from './dashboard'

describe('Dashboard (real browser)', () => {
  it('renders the KPI tiles and keeps the layout above the fold at 1280×720', async () => {
    const { container, getByText } = render(<Dashboard />)
    await expect.element(getByText(/monthly revenue/i)).toBeVisible()
    const tiles = container.querySelectorAll('[data-testid="kpi-tile"]')
    expect(tiles).toHaveLength(4)
    const rect = container.getBoundingClientRect()
    expect(rect.height).toBeLessThanOrEqual(720)
  })

  it('opens the date-range popover and closes on outside click', async () => {
    const { getByRole, queryByRole } = render(<Dashboard />)
    await getByRole('button', { name: /date range/i }).click()
    await expect.element(getByRole('dialog')).toBeVisible()
    await getByRole('main').click()
    expect(queryByRole('dialog')).toBeNull()
  })
})

# .github/workflows/browser.yml
on:
  pull_request:
    paths:
      - 'src/portal/**'
      - 'vitest.browser.config.ts'
      - 'package.json'
  workflow_dispatch:

jobs:
  browser:
    runs-on: ubuntu-latest
    timeout-minutes: 12
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps chromium
      - run: pnpm vitest run --config vitest.browser.config.ts