feat(e2e): Use Turbopack in Next.js app router e2e

.changeset/funny-hotels-stand.md

@@ -0,0 +1,5 @@
+---
+'@clerk/testing': patch
+---
+
+Update `signInWithEmailAndInstantPassword` to wait for session by default.

integration/presets/next.ts

@@ -8,7 +8,7 @@ const appRouter = applicationConfig()
   .useTemplate(templates['next-app-router'])
   .setEnvFormatter('public', key => `NEXT_PUBLIC_${key}`)
   .addScript('setup', constants.E2E_NPM_FORCE ? 'pnpm install --force' : 'pnpm install')
-  .addScript('dev', 'pnpm dev')
+  .addScript('dev', constants.E2E_NEXTJS_VERSION === '13' ? 'pnpm dev:webpack' : 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm start')
   .addDependency('next', constants.E2E_NEXTJS_VERSION)

integration/templates/next-app-router/next.config.js

@@ -6,6 +6,7 @@ const nextConfig = {
   experimental: {
     serverActions: true,
   },
+  outputFileTracingRoot: '/',
 };
 
 module.exports = nextConfig;

integration/templates/next-app-router/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
+    "dev:webpack": "next dev",
     "lint": "next lint",
     "start": "next start"
   },

integration/tests/next-account-portal/common.ts

@@ -159,8 +159,12 @@ export const testSSR = async ({ app, page, context, fakeUser }: TestParams) => {
   await u.page.getByRole('button', { name: /Sign in/i }).click();
   await u.po.signIn.waitForMounted();
 
-  // Sign in with email and password
-  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+  // Sign in with email and password. If we wait for the session, we will miss the initial redirect back to localhost.
+  await u.po.signIn.signInWithEmailAndInstantPassword({
+    email: fakeUser.email,
+    password: fakeUser.password,
+    waitForSession: false,
+  });
 
   // Navigate back to localhost
   const response = await page.waitForResponse(

packages/testing/src/playwright/unstable/page-objects/common.ts

@@ -51,6 +51,11 @@ export const common = ({ page }: { page: EnhancedPage }) => {
     getLastNameInput: () => {
       return page.locator('input[name=lastName]');
     },
+    waitForSession: async () => {
+      return page.waitForFunction(() => {
+        return !!window.Clerk?.session;
+      });
+    },
   };
 
   return self;

packages/testing/src/playwright/unstable/page-objects/signIn.ts

@@ -63,13 +63,25 @@ export const createSignInComponentPageObject = (testArgs: { page: EnhancedPage }
     signInWithOauth: (provider: string) => {
       return page.getByRole('button', { name: new RegExp(`continue with ${provider}`, 'gi') });
     },
-    signInWithEmailAndInstantPassword: async (opts: { email: string; password: string }) => {
+    signInWithEmailAndInstantPassword: async ({
+      email,
+      password,
+      waitForSession = true,
+    }: {
+      email: string;
+      password: string;
+      waitForSession?: boolean;
+    }) => {
       const identifierField = self.getIdentifierInput();
       await expect(identifierField).toBeVisible();
 
-      await identifierField.fill(opts.email);
-      await self.setInstantPassword(opts.password);
+      await identifierField.fill(email);
+      await self.setInstantPassword(password);
       await self.continue();
+
+      if (waitForSession) {
+        await self.waitForSession();
+      }
     },
   };
   return self;