fix(e2e): fix generic tests

nikosdouvlis · nikosdouvlis · commit 662ab05d1112 · 2025-12-05T14:03:00.000+02:00
diff --git a/integration/templates/astro-hybrid/astro.config.mjs b/integration/templates/astro-hybrid/astro.config.mjs
@@ -4,7 +4,16 @@ import react from '@astrojs/react';
 
 export default defineConfig({
   output: 'hybrid',
-  integrations: [clerk(), react()],
+  integrations: [
+    clerk({
+      appearance: {
+        layout: {
+          showOptionalFields: true,
+        },
+      },
+    }),
+    react(),
+  ],
   server: {
     port: Number(process.env.PORT),
   },
diff --git a/integration/templates/astro-node/astro.config.mjs b/integration/templates/astro-node/astro.config.mjs
@@ -10,7 +10,17 @@ export default defineConfig({
   adapter: node({
     mode: 'standalone',
   }),
-  integrations: [clerk(), react(), tailwind()],
+  integrations: [
+    clerk({
+      appearance: {
+        layout: {
+          showOptionalFields: true,
+        },
+      },
+    }),
+    react(),
+    tailwind(),
+  ],
   server: {
     port: Number(process.env.PORT),
   },
diff --git a/integration/templates/custom-flows-react-vite/src/main.tsx b/integration/templates/custom-flows-react-vite/src/main.tsx
@@ -23,6 +23,11 @@ createRoot(document.getElementById('root')!).render(
           publishableKey={PUBLISHABLE_KEY}
           clerkJSUrl={import.meta.env.VITE_CLERK_JS_URL as string}
           clerkUiUrl={import.meta.env.VITE_CLERK_UI_URL as string}
+          appearance={{
+            layout: {
+              showOptionalFields: true,
+            },
+          }}
         >
           <BrowserRouter>
             <Routes>
diff --git a/integration/templates/expo-web/app/_layout.tsx b/integration/templates/expo-web/app/_layout.tsx
@@ -10,6 +10,11 @@ export default function RootLayout() {
       routerReplace={to => router.replace(to)}
       clerkJSUrl={process.env.EXPO_PUBLIC_CLERK_JS_URL}
       clerkUiUrl={process.env.EXPO_PUBLIC_CLERK_UI_URL}
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
     >
       <ClerkLoaded>
         <Stack>
diff --git a/integration/templates/next-app-router-quickstart/src/app/layout.tsx b/integration/templates/next-app-router-quickstart/src/app/layout.tsx
@@ -11,7 +11,13 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <ClerkProvider>
+    <ClerkProvider
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <html lang='en'>
         <body className={inter.className}>{children}</body>
       </html>
diff --git a/integration/templates/next-app-router/src/app/jwt-v2-organizations/(tests)/has-ssr/page.tsx b/integration/templates/next-app-router/src/app/jwt-v2-organizations/(tests)/has-ssr/page.tsx
@@ -3,7 +3,14 @@ import { SSR } from './client';
 
 export default function Page() {
   return (
-    <ClerkProvider dynamic>
+    <ClerkProvider
+      dynamic
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <SSR />
     </ClerkProvider>
   );
diff --git a/integration/templates/next-app-router/src/app/layout.tsx b/integration/templates/next-app-router/src/app/layout.tsx
@@ -14,6 +14,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <ClerkProvider
       appearance={{
         layout: {
+          showOptionalFields: true,
           // Icon buttons only contain accessible labels when they use an icon; our generated letter icon does not have
           // an accessible label. Using the "blockButton" variant ensures that the button contains a visible label that
           // can be selected by a Playwright selector.
diff --git a/integration/templates/next-app-router/src/app/settings/useAuth-has/layout.tsx b/integration/templates/next-app-router/src/app/settings/useAuth-has/layout.tsx
@@ -1,5 +1,16 @@
 import { ClerkProvider } from '@clerk/nextjs';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <ClerkProvider dynamic>{children}</ClerkProvider>;
+  return (
+    <ClerkProvider
+      dynamic
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
+    >
+      {children}
+    </ClerkProvider>
+  );
 }
diff --git a/integration/templates/nuxt-node/nuxt.config.js b/integration/templates/nuxt-node/nuxt.config.js
@@ -1,5 +1,12 @@
 export default defineNuxtConfig({
   modules: ['@clerk/nuxt'],
+  clerk: {
+    appearance: {
+      layout: {
+        showOptionalFields: true,
+      },
+    },
+  },
   devtools: {
     enabled: false,
   },
diff --git a/integration/templates/react-cra/src/index.tsx b/integration/templates/react-cra/src/index.tsx
@@ -11,6 +11,11 @@ root.render(
       publishableKey={process.env.REACT_APP_CLERK_PUBLISHABLE_KEY as string}
       clerkJSUrl={process.env.REACT_APP_CLERK_JS as string}
       clerkUiUrl={process.env.REACT_APP_CLERK_UI as string}
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
     >
       <App />
     </ClerkProvider>
diff --git a/integration/templates/react-router-library/src/main.tsx b/integration/templates/react-router-library/src/main.tsx
@@ -10,7 +10,14 @@ const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
+      <ClerkProvider
+        publishableKey={PUBLISHABLE_KEY}
+        appearance={{
+          layout: {
+            showOptionalFields: true,
+          },
+        }}
+      >
         <Routes>
           <Route
             path='/'
diff --git a/integration/templates/react-router-node/app/root.tsx b/integration/templates/react-router-node/app/root.tsx
@@ -30,7 +30,14 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App({ loaderData }: Route.ComponentProps) {
   return (
-    <ClerkProvider loaderData={loaderData}>
+    <ClerkProvider
+      loaderData={loaderData}
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <main>
         <Outlet />
       </main>
diff --git a/integration/templates/react-vite/src/main.tsx b/integration/templates/react-vite/src/main.tsx
@@ -34,6 +34,11 @@ const Root = () => {
       clerkUiUrl={import.meta.env.VITE_CLERK_UI_URL as string}
       routerPush={(to: string) => navigate(to)}
       routerReplace={(to: string) => navigate(to, { replace: true })}
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
       experimental={{
         persistClient: import.meta.env.VITE_EXPERIMENTAL_PERSIST_CLIENT
           ? import.meta.env.VITE_EXPERIMENTAL_PERSIST_CLIENT === 'true'
diff --git a/integration/templates/tanstack-react-start/src/routes/__root.tsx b/integration/templates/tanstack-react-start/src/routes/__root.tsx
@@ -22,7 +22,13 @@ function RootComponent() {
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <ClerkProvider>
+    <ClerkProvider
+      appearance={{
+        layout: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <html>
         <head>
           <HeadContent />
diff --git a/integration/templates/vue-vite/src/main.ts b/integration/templates/vue-vite/src/main.ts
@@ -10,6 +10,11 @@ app.use(clerkPlugin, {
   clerkJSUrl: import.meta.env.VITE_CLERK_JS_URL,
   clerkUiUrl: import.meta.env.VITE_CLERK_UI_URL,
   clerkJSVersion: import.meta.env.VITE_CLERK_JS_VERSION,
+  appearance: {
+    layout: {
+      showOptionalFields: true,
+    },
+  },
 });
 app.use(router);
 app.mount('#app');
