clerk-testing

par clerk

Tests E2E pour les applications Clerk. À utiliser avec Playwright ou Cypress pour les tests de flux d'authentification.

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

Plus de skills de clerk

clerk-monorepo
clerk
Travaillez efficacement dans le monorepo du SDK clerk/javascript. Utilisez lors de la configuration du dépôt, de la compilation / des tests / de l'exécution d'un package, pour décider lequel des @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
Auteur et utilisation des machines d'état Mosaic. À utiliser lorsque l'utilisateur écrit une machine d'état avec createMachine, modélise un flux en plusieurs étapes, connecte une machine à 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
Modèles Astro avec Clerk — middleware, pages SSR, composants îles, routes API, rendu statique vs rendu SSR. Déclencheurs : astro clerk, clerk astro middleware,…
official
clerk-backend-api
clerk
Explorateur et exécuteur de l'API REST backend Clerk. Parcourez les tags, inspectez les schémas des endpoints et exécutez des requêtes authentifiées. À utiliser pour lister les utilisateurs, gérer…
official
clerk-chrome-extension-patterns
clerk
Authentification d'extension Chrome avec @clerk/chrome-extension -- configuration popup/sidepanel, syncHost pour OAuth/SAML via application web, createClerkClient pour les service workers et…
official
clerk-cli
clerk
Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, impersonation, local webhook testing, deploy verification, instance…
official