integration/tests/next-build.test.ts

import { expect, test } from '@playwright/test';

import type { Application } from '../models/application';
import { appConfigs } from '../presets';

test.describe('next build @nextjs', () => {
  test.describe.configure({ mode: 'parallel' });
  let app: Application;
  const output = [];

  test.beforeAll(async () => {
    app = await appConfigs.next.appRouter
      .clone()
      .addFile(
        'src/app/provider.tsx',
        () => `'use client'
import { ClerkProvider } from "@clerk/nextjs"

export function Provider({ children }: { children: any }) {
  return (
    <ClerkProvider>
      {children}
    </ClerkProvider>
  )
}`,
      )
      .addFile(
        'src/app/layout.tsx',
        () => `import './globals.css';
import { Inter } from 'next/font/google';
import { Provider } from './provider';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <Provider>
      <html lang='en'>
        <body className={inter.className}>{children}</body>
      </html>
    </Provider>
  );
}
      `,
      )
      .commit();
    await app.setup();
    await app.withEnv(appConfigs.envs.withEmailCodes);
    await app.build();
  });

  test.afterAll(async () => {
    await app.teardown();
  });

  test('When <ClerkProvider /> is used as a client component, builds successfully and does not force dynamic rendering', () => {
    const dynamicIndicator = 'λ';

    /**
     * Using /_not-found as it is an internal page that should statically render by default.
     * This is a good indicator of whether or not the entire app has been opted-in to dynamic rendering.
     */
    const notFoundPageLine = app.buildOutput.split('\n').find(msg => msg.includes('/_not-found'));

    expect(notFoundPageLine).not.toContain(dynamicIndicator);
  });
});