Tools Reference

Quick reference of tools and commands for each testing level.

Tools by Testing Level

Level	Tools	Install	Run Command
1	vitest	`pnpm add -D vitest`	`pnpm vitest`
1	jest	`pnpm add -D jest`	`pnpm jest`
2	vitest + jsdom	`pnpm add -D vitest jsdom`	`pnpm vitest`
2	vitest + happy-dom	`pnpm add -D vitest happy-dom`	`pnpm vitest`
2	@testing-library/react	`pnpm add -D @testing-library/react`	(used in tests)
3	vitest (reading built files)	`pnpm add -D vitest`	`pnpm build && pnpm vitest --project build`
4	Playwright	`pnpm add -D @playwright/test`	`npx playwright test`
4	headless-browser	(Claude Code skill)	`/headless-browser`
5	verify-ui	(Claude Code skill)	`/verify-ui`
5	headless-browser	(Claude Code skill)	`/headless-browser`

Tool Capabilities Matrix

Capability	vitest	vitest+jsdom	Playwright	verify-ui	headless-browser
Pure function testing	Yes	Yes	—	—	—
DOM structure	—	Yes	Yes	—	—
User events	—	Yes	Yes	—	—
CSS computed styles	—	—	Yes	Yes	—
Visual screenshots	—	—	Yes	—	Yes
Console errors	—	—	Yes	—	Yes
Multi-page navigation	—	—	Yes	—	Yes
Build output	Yes	—	—	—	—
Responsive viewports	—	—	Yes	Yes	Yes

Vitest Configuration Quick Reference

Minimal unit test setup

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    include: ["src/**/*.test.ts"],
  },
});

Component test setup (jsdom)

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "jsdom",
    include: ["src/**/*.test.tsx"],
    setupFiles: ["./test-setup.ts"],
  },
});

Workspace setup (multiple test types)

// vitest.workspace.ts
import { defineWorkspace } from "vitest/config";

export default defineWorkspace([
  {
    test: { name: "unit", include: ["src/**/*.test.ts"], environment: "node" },
  },
  {
    test: {
      name: "component",
      include: ["src/**/*.test.tsx"],
      environment: "jsdom",
    },
  },
  {
    test: {
      name: "build",
      include: ["tests/build/**/*.test.ts"],
      environment: "node",
    },
  },
]);

Playwright Configuration Quick Reference

Basic setup

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  testDir: "./e2e",
  use: {
    baseURL: "http://localhost:3000",
  },
  webServer: {
    command: "pnpm dev",
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
});

WebKit-only (for Tauri)

// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  projects: [
    { name: "webkit", use: { ...devices["Desktop Safari"] } },
  ],
});

Production build testing

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  webServer: {
    command: "pnpm build && pnpm preview",
    port: 4173,
    reuseExistingServer: !process.env.CI,
  },
});

Claude Code Skill Commands

Command	Level	Purpose
`/headless-browser`	4, 5	Take screenshots, check console errors, interact with pages
`/verify-ui`	5	Assert computed CSS values deterministically
`/test-wisdom`	—	Get guidance on which testing level to use