clerk-testing

por clerk

Utilidades de pruebas E2E para flujos de autenticación de Clerk en Playwright y Cypress. Compatible con ambos frameworks Playwright y Cypress con patrones de configuración específicos para cada framework (globalSetup para Playwright, comandos personalizados para Cypress). Proporciona las utilidades clerkSetup() y setupClerkTestingToken() para inicializar entornos de prueba y evitar la detección de bots. Incluye persistencia de storageState para reutilizar sesiones autenticadas entre pruebas, reduciendo el tiempo de ejecución. Requiere claves de API de prueba ( 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

Más skills de 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 para la gestión de suscripciones - renderiza la PricingTable de Clerk
clerk-nextjs-patterns
clerk
Patrones avanzados de Next.js para autenticación, middleware, Server Actions y almacenamiento en caché con ámbito de usuario usando Clerk. Distingue entre auth() del lado del servidor y el hook useAuth() del lado del cliente; mezclarlos es un error común que causa fallos. Cubre estrategias de middleware (primero público vs primero protegido), protección de rutas de API y códigos de estado HTTP adecuados (401 vs 403). Incluye patrones de almacenamiento en caché con ámbito de usuario usando unstable_cache y protección de Server Actions contra mutaciones no autorizadas. Proporciona compatibilidad con Core 2...
clerk-expo-patterns
clerk
Patrones de Expo / React Native con Clerk — caché de tokens 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
El binario clerk es una puerta de enlace preautenticada hacia la API de Backend y la API de Plataforma de Clerk, además de herramientas a nivel de proyecto (autenticación, vinculación, extracción de variables de entorno, configuración de instancias). Cuando el usuario pregunte algo que involucre un recurso de Clerk, usa clerk primero en lugar de hacer un curl manual.
clerk-cli
clerk
El binario clerk es una puerta de enlace preautenticada hacia la API de Backend y la API de Plataforma de Clerk, además de herramientas a nivel de proyecto (autenticación, vinculación, extracción de entornos, configuración de instancias). Cuando el usuario pregunte algo que involucre un recurso de Clerk, recurre a clerk primero en lugar de improvisar con curl.
clerk-astro-patterns
clerk
Patrones de Astro con Clerk — middleware, páginas SSR, componentes isla,