メニュー
Vitest を使った TypeScript テスト規約。 テスト（.test.ts, .test.tsx）の作成・レビュー時に適用する。 純関数テスト、Result 型テスト、React コンポーネントテスト、モックを規定。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Git コミットメッセージの規約。Conventional Commits 形式、日本語。 Apply when creating git commits, reviewing commit messages, or when the user asks to commit changes.
React / Next.js の TypeScript 規約。 コンポーネント（.tsx）、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。
コミット前のセルフレビュー。プロジェクトの規約に沿っているかチェックする。 Apply when the user asks to review code, check conventions, or requests a self-review before committing.
スタイリング規約。Tailwind CSS v4 と inline styles の使い分け。 UI コンポーネントやプレビュー領域のスタイリング時に適用する。 Tailwind はアプリ UI に、inline styles はプレビュー領域に使い、混在させない。
TDD（テスト駆動開発）のワークフロー。 新機能やバグ修正の実装時に適用する。 Red → Green → Refactor のサイクルを必ず守る。
関数型プログラミングベースのTypeScriptコーディング規約。 TypeScriptコード（.ts/.tsx）の実装時に適用する。 型、アロー関数、Result型エラーハンドリング、不変性、命名、import、async、pipe/合成を規定。
| name | testing |
| description | Vitest を使った TypeScript テスト規約。 テスト（.test.ts, .test.tsx）の作成・レビュー時に適用する。 純関数テスト、Result 型テスト、React コンポーネントテスト、モックを規定。 |
import { describe, it, expect } from "vitest"
describe("formatCurrency", () => {
it("正の金額をフォーマットする", () => {
expect(formatCurrency(1234.5)).toBe("$1,234.50")
})
it("0を処理する", () => {
expect(formatCurrency(0)).toBe("$0.00")
})
})
ok と err の両方のパスを明示的にテストする。
describe("validateEmail", () => {
it("有効なメールで ok を返す", () => {
const result = validateEmail("user@example.com")
expect(result.isOk()).toBe(true)
expect(result._unsafeUnwrap()).toBe("user@example.com")
})
it("無効なメールで err を返す", () => {
const result = validateEmail("not-an-email")
expect(result.isErr()).toBe(true)
expect(result._unsafeUnwrapErr().code).toBe("INVALID_EMAIL")
})
})
describe("fetchUser", () => {
it("成功時にユーザーを返す", async () => {
const result = await fetchUser("user-1")
expect(result.isOk()).toBe(true)
expect(result._unsafeUnwrap().id).toBe("user-1")
})
})
実装ではなく振る舞いをテストする。
import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
describe("SearchForm", () => {
it("送信時に onSearch をクエリ付きで呼ぶ", async () => {
const onSearch = vi.fn()
render(<SearchForm onSearch={onSearch} />)
await userEvent.type(screen.getByRole("textbox"), "hello")
await userEvent.click(screen.getByRole("button", { name: /search/i }))
expect(onSearch).toHaveBeenCalledWith("hello")
})
})
テストはソースファイルと同じ場所に。
features/auth/
├── validate.ts
└── validate.test.ts
モックは最小限に。モジュールモックより依存性注入を優先。
// 依存を注入 → フェイクでテスト
const fakeRepo: UserRepository = {
findById: (id) => okAsync({ id, name: "Test" }),
}
const service = createUserService(fakeRepo)
const result = await service.getUser("1")
expect(result.isOk()).toBe(true)