test(integration): add vinext e2e tests for Clerk on Vite-based Next.js

nikosdouvlis · nikosdouvlis · commit 5774982418db · 2026-03-01T16:33:44.000+02:00
Add integration test infrastructure and 3 test suites (12 tests) to validate @clerk/nextjs works on vinext (Cloudflare's Vite-based Next.js reimplementation for Workers). Template: integration/templates/vinext-app/ with minimal Clerk app Preset: integration/presets/vinext.ts wired into test framework Tests: quickstart (sign-in/out), protect (auth gating), auth-state (cookie persistence, cross-tab, server/client consistency) All tests tagged @vinext for filtering.
diff --git a/integration/presets/index.ts b/integration/presets/index.ts
@@ -9,6 +9,7 @@ import { nuxt } from './nuxt';
 import { react } from './react';
 import { reactRouter } from './react-router';
 import { tanstack } from './tanstack';
+import { vinext } from './vinext';
 import { vue } from './vue';
 
 export const appConfigs = {
@@ -22,6 +23,7 @@ export const appConfigs = {
   astro,
   tanstack,
   nuxt,
+  vinext,
   vue,
   reactRouter,
   secrets: {
diff --git a/integration/presets/vinext.ts b/integration/presets/vinext.ts
@@ -0,0 +1,16 @@
+import { applicationConfig } from '../models/applicationConfig';
+import { templates } from '../templates';
+import { linkPackage } from './utils';
+
+const app = applicationConfig()
+  .setName('vinext-app')
+  .useTemplate(templates['vinext-app'])
+  .setEnvFormatter('public', key => `NEXT_PUBLIC_${key}`)
+  .addScript('setup', 'pnpm install')
+  .addScript('dev', 'pnpm dev')
+  .addScript('build', 'pnpm build')
+  .addScript('serve', 'pnpm start')
+  .addDependency('@clerk/nextjs', linkPackage('nextjs'))
+  .addDependency('@clerk/shared', linkPackage('shared'));
+
+export const vinext = { app } as const;
diff --git a/integration/templates/index.ts b/integration/templates/index.ts
@@ -22,6 +22,7 @@ export const templates = {
   'react-router-node': resolve(__dirname, './react-router-node'),
   'react-router-library': resolve(__dirname, './react-router-library'),
   'custom-flows-react-vite': resolve(__dirname, './custom-flows-react-vite'),
+  'vinext-app': resolve(__dirname, './vinext-app'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {
diff --git a/integration/templates/vinext-app/.gitignore b/integration/templates/vinext-app/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.next
+dist
+.vinext
diff --git a/integration/templates/vinext-app/app/api/me/route.ts b/integration/templates/vinext-app/app/api/me/route.ts
@@ -0,0 +1,14 @@
+import { auth } from '@clerk/nextjs/server';
+
+export async function GET() {
+  const authObj = await auth();
+  return new Response(
+    JSON.stringify({
+      userId: authObj.userId,
+      sessionId: authObj.sessionId,
+    }),
+    {
+      headers: { 'content-type': 'application/json' },
+    },
+  );
+}
diff --git a/integration/templates/vinext-app/app/auth-display.tsx b/integration/templates/vinext-app/app/auth-display.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { SignInButton, UserButton, useAuth } from '@clerk/nextjs';
+
+export function AuthDisplay() {
+  const { isSignedIn } = useAuth();
+
+  if (isSignedIn) {
+    return (
+      <div>
+        <UserButton />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SignInButton />
+    </div>
+  );
+}
diff --git a/integration/templates/vinext-app/app/layout.tsx b/integration/templates/vinext-app/app/layout.tsx
@@ -0,0 +1,11 @@
+import { ClerkProvider } from '@clerk/nextjs';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkProvider>
+      <html lang='en'>
+        <body>{children}</body>
+      </html>
+    </ClerkProvider>
+  );
+}
diff --git a/integration/templates/vinext-app/app/page.tsx b/integration/templates/vinext-app/app/page.tsx
@@ -0,0 +1,13 @@
+import { auth } from '@clerk/nextjs/server';
+import { AuthDisplay } from './auth-display';
+
+export default async function Home() {
+  const { userId } = await auth();
+  return (
+    <main>
+      <h1>vinext + Clerk</h1>
+      <AuthDisplay />
+      <p data-clerk-user-id={userId || ''}>{userId ? `server-user-id: ${userId}` : 'server-signed-out'}</p>
+    </main>
+  );
+}
diff --git a/integration/templates/vinext-app/app/protected/page.tsx b/integration/templates/vinext-app/app/protected/page.tsx
@@ -0,0 +1,11 @@
+import { auth } from '@clerk/nextjs/server';
+
+export default async function Protected() {
+  const { userId } = await auth.protect();
+  return (
+    <main>
+      <h1>Protected Page</h1>
+      <p>User ID: {userId}</p>
+    </main>
+  );
+}
diff --git a/integration/templates/vinext-app/app/sign-in/[[...sign-in]]/page.tsx b/integration/templates/vinext-app/app/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,4 @@
+import { SignIn } from '@clerk/nextjs';
+export default function Page() {
+  return <SignIn />;
+}
diff --git a/integration/templates/vinext-app/app/sign-up/[[...sign-up]]/page.tsx b/integration/templates/vinext-app/app/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,4 @@
+import { SignUp } from '@clerk/nextjs';
+export default function Page() {
+  return <SignUp />;
+}
diff --git a/integration/templates/vinext-app/middleware.ts b/integration/templates/vinext-app/middleware.ts
@@ -0,0 +1,3 @@
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware();
diff --git a/integration/templates/vinext-app/package.json b/integration/templates/vinext-app/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vinext-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "vite preview"
+  },
+  "dependencies": {
+    "next": "16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.25.6",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react-server-dom-webpack": "^19.2.4",
+    "typescript": "^5",
+    "vinext": "^0.0.15",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/integration/templates/vinext-app/tsconfig.json b/integration/templates/vinext-app/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/integration/templates/vinext-app/vite.config.ts b/integration/templates/vinext-app/vite.config.ts
@@ -0,0 +1,9 @@
+import vinext from 'vinext';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: {
+    port: parseInt(process.env.PORT || '5173'),
+  },
+  plugins: [vinext()],
+});
diff --git a/integration/tests/vinext-auth-state.test.ts b/integration/tests/vinext-auth-state.test.ts
@@ -0,0 +1,116 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('vinext @vinext @auth-state', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  let app: Application;
+  let fakeUser: FakeUser;
+
+  test.beforeAll(async () => {
+    test.setTimeout(120_000);
+    app = await appConfigs.vinext.app.clone().commit();
+    await app.setup();
+    await app.withEnv(appConfigs.envs.withEmailCodes);
+    await app.dev();
+
+    const u = createTestUtils({ app });
+    fakeUser = u.services.users.createFakeUser();
+    await u.services.users.createBapiUser(fakeUser);
+  });
+
+  test.afterAll(async () => {
+    await fakeUser.deleteIfExists();
+    await app.teardown();
+  });
+
+  test('first visit shows signed-out state', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToAppHome();
+    await u.page.waitForClerkJsLoaded();
+
+    await u.po.expect.toBeSignedOut();
+    await expect(u.page.getByText('server-signed-out')).toBeVisible();
+  });
+
+  test('page refresh preserves signed-in state', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await page.reload();
+    await u.page.waitForClerkJsLoaded();
+
+    await u.po.expect.toBeSignedIn();
+    await expect(u.page.getByText(/server-user-id:/)).toBeVisible();
+  });
+
+  test('new tab shares auth state', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToAppHome();
+    const mainUserId = await u.page.locator('p[data-clerk-user-id]').getAttribute('data-clerk-user-id');
+    expect(mainUserId).toBeTruthy();
+
+    await u.tabs.runInNewTab(async m => {
+      await m.page.goToAppHome();
+      await m.page.waitForClerkJsLoaded();
+
+      await m.po.expect.toBeSignedIn();
+
+      const tabUserId = await m.page.locator('p[data-clerk-user-id]').getAttribute('data-clerk-user-id');
+      expect(tabUserId).toBe(mainUserId);
+    });
+  });
+
+  test('sign out clears auth state', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToAppHome();
+    await u.po.userButton.waitForMounted();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+    await u.po.userButton.triggerSignOut();
+
+    await u.po.expect.toBeSignedOut();
+
+    await page.reload();
+    await u.page.waitForClerkJsLoaded();
+
+    await u.po.expect.toBeSignedOut();
+    await expect(u.page.getByText('server-signed-out')).toBeVisible();
+  });
+
+  test('server and client auth state match', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToAppHome();
+    await u.page.waitForClerkJsLoaded();
+
+    const serverUserId = await u.page.locator('p[data-clerk-user-id]').getAttribute('data-clerk-user-id');
+    expect(serverUserId).toBeTruthy();
+
+    const clientUserId = await page.evaluate(() => window.Clerk?.user?.id);
+    expect(clientUserId).toBeTruthy();
+
+    expect(serverUserId).toBe(clientUserId);
+  });
+});
diff --git a/integration/tests/vinext-protect.test.ts b/integration/tests/vinext-protect.test.ts
@@ -0,0 +1,78 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('vinext @vinext @protect', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  let app: Application;
+  let fakeUser: FakeUser;
+
+  test.beforeAll(async () => {
+    test.setTimeout(120_000);
+    app = await appConfigs.vinext.app.clone().commit();
+    await app.setup();
+    await app.withEnv(appConfigs.envs.withEmailCodes);
+    await app.dev();
+
+    const u = createTestUtils({ app });
+    fakeUser = u.services.users.createFakeUser();
+    await u.services.users.createBapiUser(fakeUser);
+  });
+
+  test.afterAll(async () => {
+    await fakeUser.deleteIfExists();
+    await app.teardown();
+  });
+
+  test('unauthenticated user cannot access protected page', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.page.goToRelative('/protected');
+
+    // vinext returns a 404 page for auth.protect() when unauthenticated,
+    // unlike Next.js which redirects to sign-in
+    await expect(u.page.getByText(/not found/i)).toBeVisible();
+  });
+
+  test('authenticated user can access protected page', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToRelative('/protected');
+
+    await expect(u.page.getByRole('heading', { name: /Protected Page/i })).toBeVisible();
+    await expect(u.page.getByText(/User ID:/i)).toBeVisible();
+  });
+
+  test('API route returns auth state correctly', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    const apiUrl = new URL('/api/me', app.serverUrl).toString();
+
+    // When signed out, userId should be null
+    const signedOutResponse = await u.page.request.get(apiUrl);
+    expect(signedOutResponse.ok()).toBe(true);
+    const signedOutData = await signedOutResponse.json();
+    expect(signedOutData.userId).toBeNull();
+
+    // Sign in
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    // When signed in, userId and sessionId should be present
+    const signedInResponse = await u.page.request.get(apiUrl);
+    expect(signedInResponse.ok()).toBe(true);
+    const signedInData = await signedInResponse.json();
+    expect(signedInData.userId).not.toBeNull();
+    expect(signedInData.sessionId).not.toBeNull();
+  });
+});
diff --git a/integration/tests/vinext-quickstart.test.ts b/integration/tests/vinext-quickstart.test.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules
 +.next
 +dist
 +.vinext