clerk-testing

Tests E2E pour les applications Clerk. À utiliser avec Playwright ou Cypress pour les flux d'authentification

npx skills add https://github.com/clerk/skills --skill clerk-testing

Test

Arbre de décision

Framework Documentation
Aperçu https://clerk.com/docs/guides/development/testing/overview
Playwright https://clerk.com/docs/guides/development/testing/playwright/overview
Cypress https://clerk.com/docs/guides/development/testing/cypress/overview

Modèle conceptuel

Test auth = état de session isolé. Chaque test a besoin d'un contexte auth frais.

  • clerkSetup() initialise l'environnement de test
  • setupClerkTestingToken() contourne la détection de bot
  • storageState persiste l'auth entre les tests pour plus de rapidité

Workflow

  1. Identifiez le framework de test (Playwright ou Cypress)
  2. Récupérez l'URL appropriée de l'arbre de décision ci-dessus
  3. Suivez les instructions de configuration officielles
  4. Utilisez uniquement les clés pk_test_* et sk_test_*

Bonnes pratiques

  • Utilisez setupClerkTestingToken() avant de naviguer vers les pages d'authentification
  • Utilisez les clés API de test : pk_test_xxx, sk_test_xxx
  • Sauvegardez l'état auth avec storageState pour des tests plus rapides
  • Utilisez page.waitForSelector('[data-clerk-component]') pour l'UI Clerk

Anti-patterns

Pattern Problème Solution
Clés de production dans les tests Risque de sécurité Utilisez les clés pk_test_*
Pas de setupClerkTestingToken() L'authentification échoue Appelez avant la navigation
Authentification basée sur l'UI à chaque test Tests lents Utilisez storageState

Spécifique au framework

Playwright : Utilisez globalSetup pour l'état auth Cypress : Ajoutez addClerkCommands({ Cypress, cy }) au fichier de support

Voir aussi

  • clerk-setup - Installez Clerk avant d'ajouter des tests
  • clerk-nextjs-patterns - Patterns Next.js en cours de test
  • Repo de démo

Skills similaires