clerk-testing

von clerk

E2E-Testhilfsprogramme für Clerk-Authentifizierungsabläufe in Playwright und Cypress. Unterstützt sowohl Playwright- als auch Cypress-Frameworks mit frameworkspezifischen Einrichtungsmustern (globalSetup für Playwright, benutzerdefinierte Befehle für Cypress). Bietet die Hilfsprogramme clerkSetup() und setupClerkTestingToken() zur Initialisierung von Testumgebungen und Umgehung der Bot-Erkennung. Enthält Speicherstatus-Persistenz zur Wiederverwendung authentifizierter Sitzungen über Tests hinweg, wodurch die Testausführungszeit reduziert wird. Erfordert Test-API-Schlüssel ( 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

Mehr Skills von 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 für Abonnementverwaltung – rendert Clerk's PricingTable
clerk-nextjs-patterns
clerk
Fortgeschrittene Next.js-Muster für Authentifizierung, Middleware, Server Actions und benutzerspezifisches Caching mit Clerk. Unterscheidet serverseitiges await auth() vom clientseitigen useAuth()-Hook; deren Vermischung ist ein häufiger, schwerwiegender Fehler. Behandelt Middleware-Strategien (öffentlich-zuerst vs. geschützt-zuerst), API-Routenschutz und korrekte HTTP-Statuscodes (401 vs. 403). Enthält benutzerspezifische Caching-Muster mit unstable_cache und den Schutz von Server Actions vor unbefugten Mutationen. Bietet Core 2-Kompatibilität...
clerk-expo-patterns
clerk
Expo / React Native Patterns mit Clerk — SecureStore-Token-Cache, 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
Die clerk-Binärdatei ist ein vorauthentifiziertes Gateway zur Clerk Backend API und Platform API, plus projektbezogene Werkzeuge (Authentifizierung, Verknüpfung, Umgebungsabrufe, Instanzkonfiguration). Wenn der Benutzer etwas in Bezug auf eine Clerk-Ressource fragt, greifen Sie zuerst zu clerk, anstatt curl manuell zu verwenden.
clerk-cli
clerk
Die clerk-Binärdatei ist ein vorauthentifiziertes Gateway zur Clerk Backend API und Platform API, plus projektbezogene Werkzeuge (Authentifizierung, Verknüpfungen, Umgebungsabrufe, Instanzkonfiguration). Wenn der Benutzer etwas in Bezug auf eine Clerk-Ressource fragt, greifen Sie zuerst auf clerk zurück, anstatt curl manuell zu verwenden.
clerk-astro-patterns
clerk
Astro-Muster mit Clerk — Middleware, SSR-Seiten, Inselkomponenten,