clerk-testing

par clerk

Utilitaires de test E2E pour les flux d'authentification Clerk dans Playwright et Cypress. Prend en charge les frameworks Playwright et Cypress avec des modèles de configuration spécifiques (globalSetup pour Playwright, commandes personnalisées pour Cypress). Fournit les utilitaires clerkSetup() et setupClerkTestingToken() pour initialiser les environnements de test et contourner la détection de bots. Inclut la persistance storageState pour réutiliser les sessions authentifiées entre les tests, réduisant ainsi le temps d'exécution des tests. Nécessite des clés API de test ( 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

Plus de 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
Gestion des abonnements Clerk Billing - afficher le PricingTable de Clerk
clerk-nextjs-patterns
clerk
We need to translate the given text from English to French. The text describes an agent skill for Clerk Next.js patterns. We must preserve the name "clerk-nextjs-patterns" but it's not in the text, so we don't include it. We translate only the text inside <text>. No extra labels. Keep technical terms like "Next.js", "Clerk", "auth()", "useAuth()", "unstable_cache", "Server Actions", "Core 2" as is. Translate the rest naturally. Text: "Advanced Next.js patterns for authentication, middleware, Server Actions, and user-scoped caching with Clerk. Distinguishes server-side await auth() from client-side useAuth() hook; mixing them is a common breaking mistake Covers middleware strategies (public-first vs protected-first), API route protection, and proper HTTP status codes (401 vs 403) Includes user-scoped caching patterns with unstable_cache and protecting Server Actions from unauthorized mutations Provides Core 2 compatibility..." Translation: "Modèles avancés Next.js pour l'authentification,
clerk-expo-patterns
clerk
Modèles Expo / React Native avec Clerk — Cache de jetons 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
Le binaire clerk est une passerelle pré-authentifiée vers l'API Backend et l'API Platform de Clerk, ainsi que des outils au niveau du projet (authentification, liaison, récupérations d'environnement, configuration d'instance). Lorsque l'utilisateur demande quoi que ce soit qui touche à une ressource Clerk, utilisez clerk en premier lieu plutôt que de bricoler une commande curl.
clerk-cli
clerk
Le binaire clerk est une passerelle pré-authentifiée vers l'API Backend et l'API Platform de Clerk, ainsi que des outils au niveau du projet (auth, linking, env pulls, configuration d'instance). Lorsque l'utilisateur demande quoi que ce soit qui touche à une ressource Clerk, utilisez clerk en premier plutôt que de faire un curl à la main.
clerk-astro-patterns
clerk
Modèles Astro avec Clerk — middleware, pages SSR, composants îlots,