clerk-testing

por clerk

Utilitários de teste E2E para fluxos de autenticação do Clerk no Playwright e Cypress. Suporta ambos os frameworks Playwright e Cypress com padrões de configuração específicos (globalSetup para Playwright, comandos personalizados para Cypress). Fornece as utilidades clerkSetup() e setupClerkTestingToken() para inicializar ambientes de teste e ignorar a detecção de bots. Inclui persistência de storageState para reutilizar sessões autenticadas entre testes, reduzindo o tempo de execução. Requer chaves de API de teste ( 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

Mais 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
Gerenciamento de assinaturas do Clerk Billing - renderizar a PricingTable do Clerk
clerk-nextjs-patterns
clerk
Padrões avançados de Next.js para autenticação, middleware, Server Actions e cache com escopo de usuário usando Clerk. Diferencia o await auth() no lado do servidor do hook useAuth() no lado do cliente; misturá-los é um erro comum que quebra a aplicação. Aborda estratégias de middleware (público-primeiro vs protegido-primeiro), proteção de rotas de API e códigos de status HTTP adequados (401 vs 403). Inclui padrões de cache com escopo de usuário usando unstable_cache e proteção de Server Actions contra mutações não autorizadas. Fornece compatibilidade com Core 2...
clerk-expo-patterns
clerk
Padrões Expo / React Native com Clerk — cache 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
O binário clerk é um gateway pré-autenticado para a Backend API e Platform API do Clerk, além de ferramentas em nível de projeto (autenticação, vinculação, pulls de env, configuração de instância). Quando o usuário perguntar algo que envolva um recurso do Clerk, use o clerk primeiro em vez de criar um curl manualmente.
clerk-cli
clerk
O binário clerk é um gateway pré-autenticado para a Backend API e Platform API do Clerk, além de ferramentas em nível de projeto (auth, vinculação, pulls de env, configuração de instância). Quando o usuário perguntar algo que envolva um recurso do Clerk, use o clerk primeiro em vez de criar um curl manualmente.
clerk-astro-patterns
clerk
Padrões Astro com Clerk — middleware, páginas SSR, componentes ilha,