원클릭으로
testing
Vitest を使った TypeScript テスト規約。 テスト(.test.ts, .test.tsx)の作成・レビュー時に適用する。 純関数テスト、Result 型テスト、React コンポーネントテスト、モックを規定。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
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)