clerk-testing

作者: clerk

E2E测试工具,用于在Playwright和Cypress中测试Clerk认证流程。支持Playwright和Cypress框架,并提供框架特定的设置模式(Playwright的globalSetup,Cypress的自定义命令)。提供clerkSetup()和setupClerkTestingToken()工具,用于初始化测试环境并绕过机器人检测。包含storageState持久化功能,可在测试间复用已认证的会话,减少测试执行时间。需要测试API密钥(pk_test_*,...)

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 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

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 的更多技能

mosaic
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
用于订阅管理的 Clerk Billing - 渲染 Clerk 的 PricingTable
clerk-nextjs-patterns
clerk
用于身份验证、中间件、服务器操作以及使用Clerk进行用户范围缓存的高级Next.js模式。区分服务器端await auth()与客户端useAuth()钩子;混合使用是常见的破坏性错误。涵盖中间件策略(公共优先与受保护优先)、API路由保护以及正确的HTTP状态码(401与403)。包括使用unstable_cache进行用户范围缓存模式以及保护服务器操作免受未授权修改。提供Core 2兼容性...
clerk-expo-patterns
clerk
使用 Clerk 的 Expo / React Native 模式 — SecureStore 令牌缓存、OAuth
changesets
clerk
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
clerk 二进制文件是通往 Clerk 后端 API 和平台 API 的预认证网关,同时提供项目级工具(认证、链接、环境变量拉取、实例配置)。当用户询问任何涉及 Clerk 资源的问题时,请优先使用 clerk,而不是手动编写 curl 命令。
clerk-cli
clerk
clerk 二进制文件是通往 Clerk 后端 API 和平台 API 的预认证网关,同时提供项目级工具(身份验证、链接、环境拉取、实例配置)。当用户询问任何涉及 Clerk 资源的问题时,请优先使用 clerk,而不是手动编写 curl 命令。
clerk-astro-patterns
clerk
使用 Clerk 的 Astro 模式——中间件、SSR 页面、岛屿组件