chore(e2e): update integration presets and simplify test configuration

nikosdouvlis · nikosdouvlis · commit eec60c7007d0 · 2025-12-07T23:55:09.000+02:00
Simplified integration test configuration and removed redundant setup:

- Removed 'integration' dist-tag from linkPackage calls in all presets (astro,
  express, react, custom-flows) since tests now use snapshot versions from
  Verdaccio

- Renamed CLEANUP to E2E_CLEANUP in constants for better namespacing with other
  E2E environment variables

- Removed manual clerkSetup() calls from custom-flows tests since this is now
  handled automatically in Application.dev()

- Converted machine-auth component test from testAgainstRunningApps pattern to
  inline app creation, providing more flexibility and reducing long-running app
  dependencies

- Removed MAILSAC_API_KEY from .env.local.sample as mailsac is no longer used

- Updated README.md to reflect these changes

These changes reduce boilerplate and test complexity while maintaining the same
test coverage.
diff --git a/integration/.env.local.sample b/integration/.env.local.sample
@@ -1,4 +1,3 @@
-MAILSAC_API_KEY=
 VERCEL_PROJECT_ID=
 VERCEL_ORG_ID=
 VERCEL_TOKEN=
diff --git a/integration/README.md b/integration/README.md
@@ -75,10 +75,10 @@ Below you can find code snippets for running tests in a specific manner, easily
 
 #### Keep temporary site
 
-During E2E runs a temporary site is created in which the template is copied into. If you want to keep the site around, pass the `CLEANUP` environment variable:
+During E2E runs a temporary site is created in which the template is copied into. If you want to keep the site around, pass the `E2E_CLEANUP` environment variable:
 
 ```shell
-CLEANUP=0 pnpm test:integration:base
+E2E_CLEANUP=0 pnpm test:integration:base
 ```
 
 For all available environment variables, check the [`constants.ts`](../integration/constants.ts) file.
@@ -578,7 +578,6 @@ Before writing tests, it's important to understand how Playwright handles test i
 > [!NOTE]
 > The test suite also uses these environment variables to run some tests:
 >
-> - `MAILSAC_API_KEY`: Used for [Mailsac](https://mailsac.com/) to retrieve email codes and magic links from temporary email addresses.
 > - `VERCEL_PROJECT_ID`: Only required if you plan on running deployment tests locally. This is the Vercel project ID, and it points to an application created via the Vercel dashboard. The easiest way to get access to it is by linking a local app to the Vercel project using the Vercel CLI, and then copying the values from the `.vercel` directory.
 > - `VERCEL_ORG_ID`: The organization that owns the Vercel project. See above for more details.
 > - `VERCEL_TOKEN`: A personal access token. This corresponds to a real user running the deployment command. Attention: Be extra careful with this token as it can't be scoped to a single Vercel project, meaning that the token has access to every project in the account it belongs to.
diff --git a/integration/constants.ts b/integration/constants.ts
@@ -38,10 +38,10 @@ export const constants = {
    */
   E2E_APP_CLERK_UI_DIR: process.env.E2E_APP_CLERK_UI_DIR,
   /**
-   * If CLEANUP=0 is used, the .tmp_integration directory will not be deleted.
+   * If E2E_CLEANUP=0 is used, the .tmp_integration directory will not be deleted.
    * This is useful for debugging locally.
    */
-  CLEANUP: !(process.env.CLEANUP === '0' || process.env.CLEANUP === 'false'),
+  E2E_CLEANUP: !(process.env.E2E_CLEANUP === '0' || process.env.E2E_CLEANUP === 'false'),
   DEBUG: process.env.DEBUG === 'true' || process.env.DEBUG === '1',
   /**
    * Used with E2E_APP_URL if the tests need to access BAPI.
diff --git a/integration/presets/astro.ts b/integration/presets/astro.ts
@@ -10,9 +10,9 @@ const astroNode = applicationConfig()
   .addScript('dev', 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm preview')
-  .addDependency('@clerk/astro', linkPackage('astro', 'integration'))
-  .addDependency('@clerk/shared', linkPackage('shared', 'integration'))
-  .addDependency('@clerk/localizations', linkPackage('localizations', 'integration'));
+  .addDependency('@clerk/astro', linkPackage('astro'))
+  .addDependency('@clerk/shared', linkPackage('shared'))
+  .addDependency('@clerk/localizations', linkPackage('localizations'));
 
 const astroStatic = astroNode.clone().setName('astro-hybrid').useTemplate(templates['astro-hybrid']);
 
diff --git a/integration/presets/custom-flows.ts b/integration/presets/custom-flows.ts
@@ -10,9 +10,9 @@ const reactVite = applicationConfig()
   .addScript('dev', 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm preview')
-  .addDependency('@clerk/react', linkPackage('react', 'integration'))
-  .addDependency('@clerk/shared', linkPackage('shared', 'integration'))
-  .addDependency('@clerk/ui', linkPackage('ui', 'integration'));
+  .addDependency('@clerk/react', linkPackage('react'))
+  .addDependency('@clerk/shared', linkPackage('shared'))
+  .addDependency('@clerk/ui', linkPackage('ui'));
 
 export const customFlows = {
   reactVite,
diff --git a/integration/presets/express.ts b/integration/presets/express.ts
@@ -10,9 +10,9 @@ const vite = applicationConfig()
   .addScript('dev', 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm start')
-  .addDependency('@clerk/express', linkPackage('express', 'integration'))
-  .addDependency('@clerk/clerk-js', linkPackage('clerk-js', 'integration'))
-  .addDependency('@clerk/ui', linkPackage('ui', 'integration'));
+  .addDependency('@clerk/express', linkPackage('express'))
+  .addDependency('@clerk/clerk-js', linkPackage('clerk-js'))
+  .addDependency('@clerk/ui', linkPackage('ui'));
 
 export const express = {
   vite,
diff --git a/integration/presets/react.ts b/integration/presets/react.ts
@@ -10,9 +10,9 @@ const cra = applicationConfig()
   .addScript('dev', 'pnpm start')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm start')
-  .addDependency('@clerk/react', linkPackage('react', 'integration'))
-  .addDependency('@clerk/shared', linkPackage('shared', 'integration'))
-  .addDependency('@clerk/ui', linkPackage('ui', 'integration'));
+  .addDependency('@clerk/react', linkPackage('react'))
+  .addDependency('@clerk/shared', linkPackage('shared'))
+  .addDependency('@clerk/ui', linkPackage('ui'));
 
 const vite = cra
   .clone()
diff --git a/integration/tests/custom-flows/sign-in.test.ts b/integration/tests/custom-flows/sign-in.test.ts
@@ -1,5 +1,3 @@
-import { parsePublishableKey } from '@clerk/shared/keys';
-import { clerkSetup } from '@clerk/testing/playwright';
 import { expect, test } from '@playwright/test';
 
 import type { Application } from '../../models/application';
@@ -19,20 +17,6 @@ test.describe('Custom Flows Sign In @custom', () => {
     await app.withEnv(appConfigs.envs.withEmailCodes);
     await app.dev();
 
-    const publishableKey = appConfigs.envs.withEmailCodes.publicVariables.get('CLERK_PUBLISHABLE_KEY');
-    const secretKey = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_SECRET_KEY');
-    const apiUrl = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_API_URL');
-    const { frontendApi: frontendApiUrl } = parsePublishableKey(publishableKey);
-
-    await clerkSetup({
-      publishableKey,
-      frontendApiUrl,
-      secretKey,
-      // @ts-expect-error
-      apiUrl,
-      dotenv: false,
-    });
-
     const u = createTestUtils({ app });
     fakeUser = u.services.users.createFakeUser({
       fictionalEmail: true,
diff --git a/integration/tests/custom-flows/sign-up.test.ts b/integration/tests/custom-flows/sign-up.test.ts
@@ -1,5 +1,3 @@
-import { parsePublishableKey } from '@clerk/shared/keys';
-import { clerkSetup } from '@clerk/testing/playwright';
 import { expect, test } from '@playwright/test';
 
 import type { Application } from '../../models/application';
@@ -19,20 +17,6 @@ test.describe('Custom Flows Sign Up @custom', () => {
     await app.withEnv(appConfigs.envs.withEmailCodes);
     await app.dev();
 
-    const publishableKey = appConfigs.envs.withEmailCodes.publicVariables.get('CLERK_PUBLISHABLE_KEY');
-    const secretKey = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_SECRET_KEY');
-    const apiUrl = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_API_URL');
-    const { frontendApi: frontendApiUrl } = parsePublishableKey(publishableKey);
-
-    await clerkSetup({
-      publishableKey,
-      frontendApiUrl,
-      secretKey,
-      // @ts-expect-error
-      apiUrl,
-      dotenv: false,
-    });
-
     const u = createTestUtils({ app });
     fakeUser = u.services.users.createFakeUser({
       fictionalEmail: true,
diff --git a/integration/tests/global.teardown.ts b/integration/tests/global.teardown.ts
@@ -12,7 +12,7 @@ setup('teardown long running apps', async () => {
   await killClerkJsHttpServer();
   await killClerkUiHttpServer();
 
-  if (appUrl || !constants.CLEANUP) {
+  if (appUrl || !constants.E2E_CLEANUP) {
     // if appUrl is provided, it means that the user is running an app manually
     console.log('Skipping cleanup');
     return;
diff --git a/integration/tests/machine-auth/component.test.ts b/integration/tests/machine-auth/component.test.ts
@@ -1,9 +1,10 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
+import type { Application } from '../../models/application';
 import { appConfigs } from '../../presets';
 import type { FakeOrganization, FakeUser } from '../../testUtils';
-import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+import { createTestUtils } from '../../testUtils';
 
 const mockAPIKeysEnvironmentSettings = async (
   page: Page,
@@ -27,16 +28,21 @@ const mockAPIKeysEnvironmentSettings = async (
   });
 };
 
-testAgainstRunningApps({
-  withEnv: [appConfigs.envs.withAPIKeys],
-  withPattern: ['withMachine.next.appRouter'],
-})('api keys component @machine', ({ app }) => {
+test.describe('api keys component @machine', () => {
   test.describe.configure({ mode: 'serial' });
 
+  let app: Application;
   let fakeAdmin: FakeUser;
   let fakeOrganization: FakeOrganization;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
+    app = await appConfigs.next.appRouter.clone().commit();
+
+    await app.setup();
+    await app.withEnv(appConfigs.envs.withAPIKeys);
+    await app.dev();
+
     const u = createTestUtils({ app });
     fakeAdmin = u.services.users.createFakeUser();
     const admin = await u.services.users.createBapiUser(fakeAdmin);
