clerk-testing

от clerk

Утилиты E2E-тестирования для потоков аутентификации Clerk в 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 для аутентификации, middleware, серверных действий и пользовательского кэширования с Clerk. Различает серверный await auth() и клиентский хук useAuth(); их смешивание — частая критическая ошибка. Охватывает стратегии middleware (сначала публичные или сначала защищённые), защиту маршрутов API и правильные HTTP-статус-коды (401 vs 403). Включает паттерны пользовательского кэширования с unstable_cache и защиту серверных действий от несанкционированных мутаций. Обеспечивает совместимость с 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 — это предварительно аутентифицированный шлюз к Backend API и Platform API Clerk, а также к инструментам уровня проекта (аутентификация, связывание, получение переменных окружения, конфигурация экземпляра). Когда пользователь запрашивает что-либо, связанное с ресурсами Clerk, сначала используйте clerk вместо написания curl вручную.
clerk-cli
clerk
Бинарный файл clerk — это предварительно аутентифицированный шлюз к Backend API и Platform API Clerk, а также инструментарий на уровне проекта (аутентификация, связывание, извлечение переменных окружения, конфигурация экземпляра). Когда пользователь запрашивает что-либо, связанное с ресурсами Clerk, сначала используйте clerk вместо ручного написания curl.
clerk-astro-patterns
clerk
Шаблоны Astro с Clerk — middleware, SSR-страницы, компоненты-острова