ツールクイックリファレンス
テストレベル別のツールのインストール・実行コマンド、機能マトリクス、Vitest/Playwright設定スニペット。
テストレベル別ツール
| レベル | ツール | インストール | 実行コマンド |
|---|---|---|---|
| 1 | vitest | pnpm add -D vitest | pnpm vitest run |
| 1 | jest | pnpm add -D jest | pnpm jest |
| 1 | vitest + Miniflare（バックエンド/Workers） | pnpm add -D vitest miniflare | pnpm vitest run |
| 1 | vitest + @cloudflare/vitest-pool-workers（in-worker/Workers） | pnpm add -D vitest @cloudflare/vitest-pool-workers | pnpm vitest run |
| 2 | vitest + jsdom | pnpm add -D vitest jsdom | pnpm vitest run |
| 2 | vitest + happy-dom | pnpm add -D vitest happy-dom | pnpm vitest run |
| 2 | @testing-library/react | pnpm add -D @testing-library/react | （テスト内で使用） |
| 2 | vitestブラウザモード（@vitest/browser + Playwright） | pnpm add -D vitest @vitest/browser playwright | pnpm vitest run --project browser |
| 3 | vitest（ビルドファイル読み取り） | pnpm add -D vitest | pnpm build && pnpm vitest run --project build |
| 3 | cheerio + fs/path | pnpm add -D cheerio | （テスト内で使用） |
| 3 / 4 | リンクチェック + html-validate（サイト整合性ゲート） | pnpm add -D html-validate | pnpm build && pnpm check:html && pnpm check:links |
| 4 | Playwright | pnpm add -D @playwright/test の後に npx playwright install --with-deps | npx playwright test |
| 4 | headless-browser | （Claude Codeスキル） | / |
| 5 | verify-ui | （Claude Codeスキル） | / |
| 5 | headless-browser | （Claude Codeスキル） | / |
| 5 | Playwright toHaveScreenshot()（ビジュアルリグレッションのベースライン） | pnpm add -D @playwright/test | npx playwright test --update-snapshots（ベースライン作成）/ npx playwright test（検証） |
| 6 | verify-ui-ai（最終手段、CI不可） | （Claude Codeスキル） | / |
素の vitest はウォッチモードで起動し、終了しない -- ワンショット/CI/エージェント実行では vitest run を使うこと。@playwright/test パッケージだけではブラウザバイナリは含まれない。playwright install --with-deps がブラウザ本体とOSレベルの依存関係をまとめてダウンロードする。
ツール機能マトリクス
| 機能 | vitest | vitest+jsdom | Playwright | verify-ui | headless-browser |
|---|---|---|---|---|---|
| 純粋関数テスト | はい | はい | -- | -- | -- |
| DOM構造 | -- | はい | はい | -- | -- |
| ユーザーイベント | -- | はい | はい | -- | -- |
| CSS算出スタイル | -- | -- | はい | はい | -- |
| 視覚的スクリーンショット | -- | -- | はい | はい | はい |
| コンソールエラー | -- | -- | はい | -- | はい |
| 複数ページナビゲーション | -- | -- | はい | -- | はい |
| ビルド出力 | はい | -- | -- | -- | -- |
| レスポンシブビューポート | -- | -- | はい | はい | はい |
Vitest設定クイックリファレンス
最小限のユニットテストセットアップ
// vitest.config.ts
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
include: ["src/**/*.test.ts"],
},
});コンポーネントテストセットアップ（jsdom）
// vitest.config.ts
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
environment: "jsdom",
include: ["src/**/*.test.tsx"],
setupFiles: ["./test-setup.ts"],
},
});projectsセットアップ（複数テストタイプ）
// vitest.config.ts
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
projects: [
{
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設定クイックリファレンス
基本セットアップ
// 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専用（Tauri向け）
// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";
export default defineConfig({
projects: [
{ name: "webkit", use: { ...devices["Desktop Safari"] } },
],
});本番ビルドテスト
// 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スキルコマンド
| コマンド | レベル | 目的 |
|---|---|---|
/ | 4、5 | スクリーンショット撮影、コンソールエラーチェック、ページ操作 |
/ | 5 | 算出CSS値を決定論的にアサート |
/ | 6 | L4が困難かつL5でもアサーションに到達できない場合のAI判定による視覚的検証 -- CIでは絶対に使わない |
/ | -- | どのテストレベルを使用すべきかのガイダンスを取得 |
関連ページ
クイック判断テーブル -- どのレベルを選ぶか
実行ティア -- 各レベルがどこで・いつ実行されるか
Revision History
作成更新