clerk-testing

oleh clerk

Utilitas pengujian E2E untuk alur autentikasi Clerk di Playwright dan Cypress. Mendukung framework Playwright dan Cypress dengan pola pengaturan khusus framework (globalSetup untuk Playwright, perintah kustom untuk Cypress). Menyediakan utilitas clerkSetup() dan setupClerkTestingToken() untuk menginisialisasi lingkungan pengujian dan melewati deteksi bot. Menyertakan persistensi storageState untuk menggunakan kembali sesi terautentikasi di seluruh pengujian, mengurangi waktu eksekusi pengujian. Membutuhkan kunci API pengujian ( 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

Lebih banyak skill dari 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 untuk manajemen langganan - merender PricingTable milik Clerk
clerk-nextjs-patterns
clerk
Pola Next.js tingkat lanjut untuk autentikasi, middleware, Server Actions, dan caching berbasis pengguna dengan Clerk. Membedakan auth() sisi server dari hook useAuth() sisi klien; mencampurkannya adalah kesalahan umum yang menyebabkan kerusakan. Mencakup strategi middleware (public-first vs protected-first), perlindungan rute API, dan kode status HTTP yang tepat (401 vs 403). Termasuk pola caching berbasis pengguna dengan unstable_cache dan melindungi Server Actions dari mutasi yang tidak sah. Menyediakan kompatibilitas Core 2...
clerk-expo-patterns
clerk
Pola Expo / React Native dengan Clerk — Cache token 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
Biner clerk adalah gateway terautentikasi sebelumnya ke Backend API dan Platform API Clerk, ditambah perkakas tingkat proyek (auth, tautan, tarik env, konfigurasi instance). Saat pengguna menanyakan apa pun yang menyentuh sumber daya Clerk, gunakan clerk terlebih dahulu daripada membuat curl secara manual.
clerk-cli
clerk
Biner clerk adalah gerbang yang telah diautentikasi sebelumnya menuju Backend API dan Platform API Clerk, ditambah peralatan tingkat proyek (auth, penautan, penarikan env, konfigurasi instance). Saat pengguna menanyakan sesuatu yang menyentuh sumber daya Clerk, gunakan clerk terlebih dahulu daripada membuat curl secara manual.
clerk-astro-patterns
clerk
Pola Astro dengan Clerk — middleware, halaman SSR, komponen island,