feat(testing): Introduce support for the Cypress framework

[anagstef]

Description

This PR adds support for the Cypress framework. It's been tested on the latest version of Cypress (v13).

All utilities related to Cypress are exported from the subpath @clerk/testing/cypress.

Also, this PR adds an Error to be thrown if someone tries to import from the package's root path (@clerk/testing).

Usage

Firstly, add your Clerk keys (CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY) to your environment variables file (e.g. .env.local or .env.).
You can find these keys in your Clerk Dashboard.

All Cypress related utilities are exported from @clerk/testing/cypress. Make sure that your import paths are correct!

On your cypress.config.ts, you must use the clerkSetup function to set up Clerk for your tests.
Keep in mind that you must pass the Cypress config object to the clerkSetup function and also return the new config object from the setupNodeEvents function.

// cypress.config.ts
import { clerkSetup } from '@clerk/testing/cypress';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      return clerkSetup({ config });
    },
    baseUrl: 'http://localhost:3000', // or your app's URL
  },
});

Then, you can use the setupClerkTestingToken function to bypass bot protection on your tests.

// cypress/e2e/app.cy.ts
import { setupClerkTestingToken } from "@clerk/testing/cypress";

it("sign up", () => {
  setupClerkTestingToken();

  cy.visit('/sign-up');
  ...
});

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 80a6440

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/testing	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[anagstef]

!snapshot

[clerk-cookie]

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/testing	1.1.0-snapshot.v641a910

Tip: Use the snippet copy button below to quickly install the required packages.
gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/testing

npm i @clerk/testing@1.1.0-snapshot.v641a910 --save-exact