clerk-testing

작성자: clerk

Clerk 인증 흐름을 위한 Playwright 및 Cypress E2E 테스트 유틸리티입니다. Playwright와 Cypress 프레임워크를 모두 지원하며, 각 프레임워크에 맞는 설정 패턴(Playwright의 globalSetup, 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 pk_test_* and sk_test_* keys only

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

clerk의 다른 스킬

clerk-monorepo
clerk
Work effectively in the clerk/javascript SDK monorepo. Use when setting up the repo, building / testing / running a package, deciding which of the @clerk/*…
official
mosaic
clerk
Work on Mosaic UI: styling a component with slot recipes (`defineSlotRecipe` / `useRecipe` / slots / variants), or building a flow — authoring a state machine…
official
mosaic-machine
clerk
Mosaic 상태 머신을 작성하고 사용합니다. 사용자가 createMachine으로 상태 머신을 작성하거나, 다단계 흐름을 모델링하거나, 머신을 React에 연결할 때 사용합니다.
official
clerk-android
clerk
Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt…
official
clerk-astro-patterns
clerk
Astro 패턴과 Clerk — 미들웨어, SSR 페이지, 아일랜드 컴포넌트, API 라우트, 정적 렌더링 vs SSR 렌더링. 다음에서 트리거: astro clerk, clerk astro middleware,…
official
clerk-backend-api
clerk
Clerk 백엔드 REST API 탐색기 및 실행기. 태그를 탐색하고, 엔드포인트 스키마를 검사하며, 인증된 요청을 실행합니다. 사용자 목록 조회, 관리 시 사용하세요…
official
clerk-chrome-extension-patterns
clerk
Chrome 확장 프로그램 인증 with @clerk/chrome-extension -- 팝업/사이드패널 설정, 웹 앱을 통한 OAuth/SAML용 syncHost, 서비스 워커용 createClerkClient 및…
official
clerk-cli
clerk
Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, impersonation, local webhook testing, deploy verification, instance…
official