clerk-testing

作者: clerk

Clerk 應用程式的 E2E 測試。可與 Playwright 或 Cypress 搭配使用,進行認證流程測試。

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

Testing

Decision Tree

FrameworkDocumentation
Overviewhttps://clerk.com/docs/guides/development/testing/overview
Playwrighthttps://clerk.com/docs/guides/development/testing/playwright/overview
Cypresshttps://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

  1. Identify test framework (Playwright or Cypress)
  2. WebFetch the appropriate URL from decision tree above
  3. Follow official setup instructions
  4. Use pk_test_* and sk_test_* keys only

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

PatternProblemFix
Production keys in testsSecurity riskUse pk_test_* keys
No setupClerkTestingToken()Auth failsCall before navigation
UI-based sign-in every testSlow testsUse 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 的更多技能

clerk-monorepo
clerk
在clerk/javascript SDK monorepo中高效工作。適用於設定儲存庫、建置/測試/執行套件、決定使用哪個@clerk/*…
official
mosaic
clerk
Work on Mosaic UI: styling a component with slot recipes (`defineSlotRecipe` / `useRecipe` / slots / variants), or building a flow — authoring a state machine…
official
mosaic-machine
clerk
編寫與使用 Mosaic 狀態機。當使用者正在使用 createMachine 撰寫狀態機、建模多步驟流程、將機器連接至 React 等情境時使用。
official
clerk-android
clerk
Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt…
official
clerk-astro-patterns
clerk
使用 Clerk 的 Astro 模式 — 中介軟體、SSR 頁面、島嶼元件、API 路由、靜態 vs SSR 渲染。觸發條件:astro clerk、clerk astro middleware、…
official
clerk-backend-api
clerk
Clerk 後端 REST API 探索工具與執行工具。瀏覽標籤、檢查端點配置結構,並執行已驗證的要求。適用於列出使用者、管理…
official
clerk-chrome-extension-patterns
clerk
使用 @clerk/chrome-extension 進行 Chrome 擴充功能驗證 -- popup/sidepanel 設定、透過 Web 應用程式使用 syncHost 進行 OAuth/SAML、為 service workers 使用 createClerkClient 以及…
official
clerk-cli
clerk
Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, impersonation, local webhook testing, deploy verification, instance…
official