clerk-testing

โดย clerk

ยูทิลิตี้สำหรับการทดสอบ E2E สำหรับโฟลว์การตรวจสอบสิทธิ์ของ Clerk ใน Playwright และ Cypress รองรับทั้งเฟรมเวิร์ก Playwright และ Cypress พร้อมรูปแบบการตั้งค่าเฉพาะเฟรมเวิร์ก (globalSetup สำหรับ Playwright, คำสั่งที่กำหนดเองสำหรับ Cypress) มียูทิลิตี้ clerkSetup() และ setupClerkTestingToken() เพื่อเริ่มต้นสภาพแวดล้อมการทดสอบและหลีกเลี่ยงการตรวจจับบอท รวมถึงการคงสถานะ storageState เพื่อนำเซสชันที่ตรวจสอบสิทธิ์แล้วกลับมาใช้ใหม่ในการทดสอบ ลดระยะเวลาการดำเนินการทดสอบ ต้องใช้คีย์ API สำหรับทดสอบ ( 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

Skills เพิ่มเติมจาก 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 สำหรับการจัดการการสมัครสมาชิก - แสดง PricingTable ของ Clerk
clerk-nextjs-patterns
clerk
รูปแบบ Next.js ขั้นสูงสำหรับการตรวจสอบสิทธิ์ มิดเดิลแวร์ Server Actions และการแคชตามขอบเขตผู้ใช้ด้วย Clerk แยกความแตกต่างระหว่าง auth() แบบฝั่งเซิร์ฟเวอร์ที่รอคอยผลลัพธ์กับ useAuth() hook ฝั่งไคลเอ็นต์ การผสมกันเป็นข้อผิดพลาดที่พบบ่อย ครอบคลุมกลยุทธ์มิดเดิลแวร์ (สาธารณะก่อนเทียบกับป้องกันก่อน) การป้องกันเส้นทาง API และรหัสสถานะ HTTP ที่เหมาะสม (401 เทียบกับ 403) รวมถึงรูปแบบการแคชตามขอบเขตผู้ใช้ด้วย unstable_cache และการป้องกัน Server Actions จากการกลายพันธุ์ที่ไม่ได้รับอนุญาต ให้ความเข้ากันได้กับ Core 2...
clerk-expo-patterns
clerk
รูปแบบ Expo / React Native กับ Clerk — แคชโทเค็น 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
ไบนารี clerk เป็นเกตเวย์ที่ผ่านการรับรองความถูกต้องล่วงหน้าไปยัง Clerk's Backend API และ Platform API พร้อมด้วยเครื่องมือระดับโปรเจกต์ (การรับรองความถูกต้อง การเชื่อมโยง การดึง env การกำหนดค่าอินสแตนซ์) เมื่อผู้ใช้ถามถึงสิ่งใดก็ตามที่เกี่ยวข้องกับทรัพยากร Clerk ให้ใช้ clerk ก่อนแทนที่จะเขียน curl ด้วยตนเอง
clerk-cli
clerk
ไบนารี clerk เป็นเกตเวย์ที่ผ่านการรับรองความถูกต้องล่วงหน้าไปยัง Clerk's Backend API และ Platform API พร้อมด้วยเครื่องมือระดับโปรเจกต์ (การตรวจสอบสิทธิ์ การเชื่อมโยง การดึง env การกำหนดค่าอินสแตนซ์) เมื่อผู้ใช้ถามถึงสิ่งใดก็ตามที่เกี่ยวข้องกับทรัพยากรของ Clerk ให้ใช้ clerk ก่อนแทนที่จะเขียน curl ด้วยตนเอง
clerk-astro-patterns
clerk
รูปแบบ Astro กับ Clerk — มิดเดิลแวร์, หน้า SSR, คอมโพเนนต์ไอส์แลนด์