clerk-testing

作成者： clerk

Clerk認証フローのE2Eテストユーティリティ（PlaywrightおよびCypress対応）。PlaywrightとCypressの両フレームワークをサポートし、フレームワーク固有のセットアップパターン（PlaywrightではglobalSetup、Cypressではカスタムコマンド）を提供。clerkSetup()とsetupClerkTestingToken()ユーティリティを使用してテスト環境を初期化し、ボット検出をバイパス。認証済みセッションをテスト間で再利用するstorageState永続化機能を含み、テスト実行時間を短縮。テスト用APIキー（pk_test_*、...）が必要。

npx skills add https://github.com/clerk/skills --skill clerk-testing

ZIPダウンロード GitHub

Testing

Decision Tree

Framework	Documentation
Overview	https://clerk.com/docs/guides/development/testing/overview
Playwright	https://clerk.com/docs/guides/development/testing/playwright/overview
Cypress	https://clerk.com/docs/guides/development/testing/cypress/overview

Mental Model

Test auth = isolated session state. Each test needs fresh auth context.

clerkSetup() initializes test environment
setupClerkTestingToken() bypasses bot detection
storageState persists auth between tests for speed

Workflow

Identify test framework (Playwright or Cypress)
WebFetch the appropriate URL from decision tree above
Follow official setup instructions
Use development-instance keys only (pk_test_* / sk_test_*). If the project has no keys yet, npx clerk@latest init (the Clerk CLI; see clerk-setup) creates a Clerk application and writes development-instance keys to the env file. No Clerk account or Dashboard visit is needed.

Best Practices

Use setupClerkTestingToken() before navigating to auth pages
Use test API keys: pk_test_xxx, sk_test_xxx
Save auth state with storageState for faster tests
Use page.waitForSelector('[data-clerk-component]') for Clerk UI

Anti-Patterns

Pattern	Problem	Fix
Production keys in tests	Security risk	Use `pk_test_*` keys
No `setupClerkTestingToken()`	Auth fails	Call before navigation
UI-based sign-in every test	Slow tests	Use `storageState`

Framework-Specific

Playwright: Use globalSetup for auth state Cypress: Add addClerkCommands({ Cypress, cy }) to support file

See Also

clerk-setup - Install Clerk before adding tests
clerk-nextjs-patterns - Next.js patterns being tested
Demo Repo

clerkのその他のスキル

Work on Mosaic UI: styling a component with slot recipes (`defineSlotRecipe` / `useRecipe` / slots / variants), or building a flow — authoring a state machine…

サブスクリプション管理のためのClerk Billing - ClerkのPricingTableをレンダリング

clerk-nextjs-patterns

Clerkを使用した認証、ミドルウェア、Server Actions、ユーザースコープキャッシングのための高度なNext.jsパターン。サーバーサイドのawait auth()とクライアントサイドのuseAuth()フックを区別します。これらを混在させることはよくある破壊的なミスです。ミドルウェア戦略（public-first vs protected-first）、APIルート保護、適切なHTTPステータスコード（401 vs 403）をカバーします。unstable_cacheを使用したユーザースコープキャッシングパターンと、Server Actionsを不正な変更から保護する方法を含みます。Core 2互換性を提供します...

clerk-expo-patterns

Expo / React NativeパターンとClerk — SecureStoreトークンキャッシュ、OAuth

Create or refresh a `.changeset/<slug>.md` for the current branch, or report that none is required. Triggers on "/changesets create", "add a changeset",…

clerkバイナリは、ClerkのBackend APIおよびPlatform APIへの事前認証済みゲートウェイであり、プロジェクトレベルのツール（認証、リンク、環境変数の取得、インスタンス設定）も提供します。ユーザーがClerkリソースに関わる何かを尋ねた場合、手動でcurlを使う代わりに、まずclerkを使用してください。

clerk バイナリは、Clerk のバックエンド API およびプラットフォーム API への事前認証済みゲートウェイであり、プロジェクトレベルのツール（認証、リンク、環境変数のプル、インスタンス設定）も提供します。ユーザーが Clerk リソースに関連する何かを尋ねた場合、手動で curl を使う代わりに、まず clerk を使用してください。

clerk-astro-patterns

Clerkを使ったAstroパターン — ミドルウェア、SSRページ、アイランドコンポーネント