Tools Quick 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) | / |
| 5 | verify-ui | (Claude Code skill) | / |
| 5 | headless-browser | (Claude Code skill) | / |
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 |
|---|---|---|
/ | 4, 5 | Take screenshots, check console errors, interact with pages |
/ | 5 | Assert computed CSS values deterministically |
/ | -- | Get guidance on which testing level to use |
Revision History
Takeshi TakatsudoCreated: 2026-04-04T07:11:52+09:00Updated: 2026-06-17T02:20:40+09:00