fix(react-email): e2e tests not running (#3391)

Author: gabrielmfern

packages/react-email/package.json

@@ -11,6 +11,7 @@
     "build:watch": "tsdown --watch src",
     "clean": "rm -rf dist",
     "test": "vitest run",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
@@ -69,11 +70,14 @@
     "@types/css-tree": "catalog:",
     "@types/mime-types": "catalog:",
     "@types/prompts": "2.4.9",
+    "@types/shelljs": "0.10.0",
     "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
+    "shelljs": "0.10.0",
     "shlex": "3.0.0",
     "tsx": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "yalc": "catalog:"
   }
 }

packages/react-email/src/components/tailwind/e2e/integrations.spec.ts

@@ -19,8 +19,8 @@ const $ = (command: string, cwd: string = path.resolve(__dirname, '..')) => {
 
 describe('integrations', () => {
   beforeAll(() => {
-    const packageLocation = path.resolve(__dirname, '../');
-    $('yalc installations clean @react-email/tailwind', packageLocation);
+    const packageLocation = path.resolve(__dirname, '../../../..');
+    $('yalc installations clean react-email', packageLocation);
     $('yalc publish', packageLocation);
   });
 

packages/react-email/src/components/tailwind/e2e/nextjs/emails/vercel-invite-user.tsx

@@ -12,9 +12,9 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
-} from '@react-email/components';
-import { Tailwind } from '@react-email/tailwind';
+} from 'react-email';
 
 interface VercelInviteUserEmailProps {
   username?: string;

packages/react-email/src/components/tailwind/e2e/nextjs/next.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   compress: false,
-  swcMinify: false,
 };
 
 export default nextConfig;

packages/react-email/src/components/tailwind/e2e/nextjs/package.json

@@ -6,11 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "preinstall": "yalc add @react-email/tailwind"
+    "preinstall": "yalc add react-email"
   },
   "dependencies": {
-    "@react-email/components": "0.0.36",
-    "@react-email/tailwind": "file:.yalc/@react-email/tailwind",
+    "react-email": "file:.yalc/react-email",
     "next": "^15",
     "react": "^19",
     "react-dom": "^19"

packages/react-email/src/components/tailwind/e2e/nextjs/src/app/page.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-email/components';
+import { render } from 'react-email';
 import { VercelInviteUserEmail } from '../../emails/vercel-invite-user';
 
 export default async function Home() {

packages/react-email/src/components/tailwind/e2e/vite/emails/vercel-invite-user.tsx

@@ -12,9 +12,9 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
-} from '@react-email/components';
-import { Tailwind } from '@react-email/tailwind';
+} from 'react-email';
 
 interface VercelInviteUserEmailProps {
   username?: string;

packages/react-email/src/components/tailwind/e2e/vite/package.json

@@ -6,12 +6,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preinstall": "yalc add @react-email/tailwind",
+    "preinstall": "yalc add react-email",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-email/components": "0.0.36",
-    "@react-email/tailwind": "file:.yalc/@react-email/tailwind",
+    "react-email": "file:.yalc/react-email",
     "react": "^19",
     "react-dom": "^19"
   },

packages/react-email/src/components/tailwind/e2e/vite/src/App.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-email/components';
+import { render } from 'react-email';
 import { VercelInviteUserEmail } from '../emails/vercel-invite-user';
 
 function App() {

packages/react-email/vitest.e2e.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    include: ['**/e2e/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    exclude: ['**/node_modules/**'],
+  },
+  esbuild: {
+    tsconfigRaw: {
+      compilerOptions: {
+        jsx: 'react-jsx',
+      },
+    },
+  },
+});