add integration test for nextjs

Author: gabrielmfern

packages/render/integrations/integrations.spec.ts

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import child_process from 'node:child_process';
+import http from 'node:http';
 import * as playwright from 'playwright';
 import shell from 'shelljs';
 
@@ -19,6 +20,59 @@ const $ = (command: string, cwd: string = path.resolve(__dirname, '..')) => {
   ).toBe(0);
 };
 
+const waitForServer = async (url: string, timeout: number) => {
+  const start = Date.now();
+  const isServerUp = (url: string) => {
+    return new Promise<boolean>((resolve) => {
+      http
+        .get(url, { timeout: 100 }, (response) => {
+          if (
+            response.statusCode &&
+            response.statusCode >= 200 &&
+            response.statusCode < 300
+          ) {
+            resolve(true);
+          } else {
+            resolve(false);
+          }
+        })
+        .on('timeout', () => {
+          resolve(false);
+        })
+        .on('error', () => {
+          resolve(false);
+        });
+    });
+  };
+  while (Date.now() - start < timeout) {
+    if (await isServerUp(url)) {
+      return;
+    }
+  }
+  throw new Error(`Server at ${url} did not respond within ${timeout}ms`);
+};
+
+const startWebServer = async (command: string, url: string, cwd: string) => {
+  const argsv = command.split(' ');
+  const child = child_process.spawn(argsv[0], argsv.slice(1), {
+    shell: true,
+    cwd,
+    stdio: 'pipe',
+  });
+
+  process.on('exit', () => {
+    child.kill();
+  });
+
+  process.on('SIGINT', () => {
+    child.kill('SIGINT');
+  });
+
+  await waitForServer(url, 15_000);
+
+  return child;
+};
+
 describe('integrations', () => {
   let page!: playwright.Page;
   let browser!: playwright.Browser;
@@ -36,49 +90,125 @@ describe('integrations', () => {
     browser.close();
   });
 
-  describe('vite', () => {
-    const viteLocation = path.resolve(import.meta.dirname, './vite/');
+  describe.only('nextjs', () => {
+    const nextLocation = path.resolve(import.meta.dirname, './nextjs/');
 
     beforeAll(() => {
-      $('npm install', viteLocation);
+      $('npm install', nextLocation);
     });
 
-    const startWebServer = async (
-      command: string,
-      url: string,
-      cwd: string,
-    ) => {
-      const argsv = command.split(' ');
-      const devServer = child_process.spawn(argsv[0], argsv.slice(1), {
-        shell: true,
-        cwd,
-        stdio: 'pipe',
+    describe('dev', () => {
+      let devServer: child_process.ChildProcess | undefined;
+
+      beforeAll(async () => {
+        devServer = await startWebServer(
+          'npm run dev',
+          'http://localhost:3000',
+          nextLocation,
+        );
+      }, 20_000);
+
+      afterAll(async () => {
+        devServer?.kill();
       });
-      const waitForServer = async (url: string, timeout: number) => {
-        const start = Date.now();
-        while (Date.now() - start < timeout) {
-          try {
-            await page.goto(url, { timeout: 1000 });
-            return;
-          } catch (e) {
-            await new Promise((resolve) => setTimeout(resolve, 100));
-          }
+
+      it('should not error when rendering in node api route', async () => {
+        const response = await fetch('http://localhost:3000/api');
+
+        if (response.status !== 200) {
+          console.log(await response.text());
         }
-        throw new Error(`Server at ${url} did not respond within ${timeout}ms`);
-      };
+        expect(response.status).toBe(200);
+      });
+
+      it('should not error when rendering in edge api route', async () => {
+        const response = await fetch('http://localhost:3000/edge');
 
-      await waitForServer(url, 1000);
-      return devServer;
-    };
+        if (response.status !== 200) {
+          console.log(await response.text());
+        }
+        expect(response.status).toBe(200);
+      });
+
+      it('should not error when rendering in the browser', async () => {
+        await page.goto('http://localhost:3000');
+
+        await expect(() =>
+          page.waitForSelector('[data-testid="rendered-error"]', {
+            timeout: 500,
+          }),
+        ).rejects.toThrow();
+        await page.waitForSelector('[data-testid="rendered-html"]', {
+          timeout: 500,
+        });
+      });
+    });
+
+    describe('build', () => {
+      let server: child_process.ChildProcess | undefined;
+
+      beforeAll(async () => {
+        $('npm run build', nextLocation);
+        server = await startWebServer(
+          'npm run start',
+          'http://localhost:3001',
+          nextLocation,
+        );
+      }, 50_000);
+
+      afterAll(async () => {
+        server?.kill();
+      });
+
+      it('should not error when rendering in node api route', async () => {
+        const response = await fetch('http://localhost:3001/api');
+
+        if (response.status !== 200) {
+          console.log(await response.text());
+        }
+        expect(response.status).toBe(200);
+      });
+
+      it('should not error when rendering in edge api route', async () => {
+        const response = await fetch('http://localhost:3001/edge');
+
+        if (response.status !== 200) {
+          console.log(await response.text());
+        }
+        expect(response.status).toBe(200);
+      });
+
+      it('should not error when rendering in the browser', async () => {
+        await page.goto('http://localhost:3001');
+
+        await expect(() =>
+          page.waitForSelector('[data-testid="rendered-error"]', {
+            timeout: 500,
+          }),
+        ).rejects.toThrow();
+        await page.waitForSelector('[data-testid="rendered-html"]', {
+          timeout: 500,
+        });
+      });
+    });
+  });
+
+  describe('vite', () => {
+    const viteLocation = path.resolve(import.meta.dirname, './vite/');
+
+    beforeAll(() => {
+      $('npm install', viteLocation);
+    });
 
     // The code being run after build has been modified by Vite and might run differently
     it('should not error when rendering in vite preview', async () => {
       $('npm run build', viteLocation);
-      const devServer = await startWebServer(
+      const previewServer = await startWebServer(
         'npm run preview',
         'http://localhost:4173',
         viteLocation,
       );
+      await page.goto('http://localhost:4173');
 
       await expect(() =>
         page.waitForSelector('[data-testid="rendered-error"]', {
@@ -89,7 +219,7 @@ describe('integrations', () => {
         timeout: 500,
       });
 
-      devServer.kill();
+      previewServer.kill();
     });
 
     it('should not error when rendering in vite dev', async () => {
@@ -98,6 +228,7 @@ describe('integrations', () => {
         'http://localhost:5173',
         viteLocation,
       );
+      await page.goto('http://localhost:5173');
 
       await expect(() =>
         page.waitForSelector('[data-testid="rendered-error"]', {

packages/render/integrations/nextjs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/render/integrations/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

packages/render/integrations/nextjs/app/api/route.tsx

@@ -0,0 +1,12 @@
+import { render } from '@react-email/render';
+
+export async function GET() {
+  try {
+    const html = await render(<div>testing element</div>, { pretty: true });
+    return new Response(html);
+  } catch (exception) {
+    return new Response(JSON.stringify(exception), {
+      status: 500,
+    });
+  }
+}

packages/render/integrations/nextjs/app/edge/route.tsx

@@ -0,0 +1,18 @@
+import { render } from '@react-email/render';
+
+export const runtime = 'edge';
+
+export async function GET() {
+  try {
+    const html = await render(<div>testing element</div>, { pretty: true });
+    return new Response(html);
+  } catch (exception) {
+    let message = 'Some error ocurred';
+    if (exception instanceof Error) {
+      message = exception.toString();
+    }
+    return new Response(message, {
+      status: 500,
+    });
+  }
+}

packages/render/integrations/nextjs/app/globals.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+
+@theme inline {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}

packages/render/integrations/nextjs/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}