feat: add e2e tests for Next.js and Vite

Author: Austin1serb

packages/core/__tests__/config/playwright.next.config.js

@@ -11,28 +11,33 @@ const BASE_URL = `http://localhost:${PORT}`;
 export default defineConfig({
 	testDir: "../e2e", // all E2E specs live here
 	snapshotDir: "../snapshots",
-	workers: 1,
-	timeout: 300_000,
+	workers: 2,
+	timeout: 30_000,
 	expect: {
-		timeout: 150_000,
+		timeout: 15_000,
 	},
 	reporter: "html",
-	globalSetup: path.resolve(__dirname, "../helpers/globalSetup.next.js"),
 
 	use: {
 		headless: true,
 		baseURL: BASE_URL,
 
 	},
 
-	// One project = one fixture app (Next, Vite, etc.)
 	projects: [
+		{
+			name: "setup",
+			testMatch: /nextSetup\.js/,
+		},
+		{
+			name: "next-cli-e2e",
+			dependencies: ["setup"],
+			testMatch: /cli-next\.spec\.js/,
+		},
 		{
 			name: "next-e2e",
-			testMatch: /.*next.*\.spec\.js/,  // Matches both cli-next.spec.js and next.spec.js
-			use: {
-				baseURL: BASE_URL,
-			},
+			dependencies: ["next-cli-e2e"],
+			testMatch: /next\.spec\.js/,
 		},
 	],
 	webServer: {

packages/core/__tests__/config/playwright.vite.config.js

@@ -11,13 +11,12 @@ const BASE_URL = `http://localhost:${PORT}`;
 export default defineConfig({
 	testDir: "../e2e", // all E2E specs live here
 	snapshotDir: "../snapshots",
-	workers: 1,
-	timeout: 300_000,
+	workers: 2,
+	timeout: 30_000,
 	expect: {
-		timeout: 150_000,
+		timeout: 15_000,
 	},
 	reporter: "html",
-	globalSetup: path.resolve(__dirname, "../helpers/globalSetup.vite.js"),
 
 	use: {
 		headless: true,
@@ -26,19 +25,19 @@ export default defineConfig({
 
 	// One project = one fixture app (Next, Vite, etc.)
 	projects: [
+		{
+			name: "setup",
+			testMatch: /viteSetup\.js/,
+		},
 		{
 			name: "vite-cli-e2e",
+			dependencies: ["setup"],
 			testMatch: /cli-vite\.spec\.js/,  // Matches both cli-vite.spec.js and vite.spec.js
-			use: {
-				baseURL: BASE_URL,
-			},
 		},
 		{
 			name: "vite-e2e",
+			dependencies: ["vite-cli-e2e"],
 			testMatch: /vite\.spec\.js/,  // Matches both cli-vite.spec.js and vite.spec.js
-			use: {
-				baseURL: BASE_URL,
-			},
 		},
 	],
 	webServer: {

packages/core/__tests__/e2e/nextSetup.js

@@ -1,15 +1,12 @@
-// packages/core/__tests__/helpers/globalSetup.next.js
 import { resetZeroUiState } from '../helpers/resetProjectState.js';
 import { loadCliFromFixture } from '../helpers/loadCli.js';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-console.log('__dirname: ', __dirname);
 
 export default async function globalSetup() {
   const projectDir = path.resolve(__dirname, '../fixtures/next');
-  console.log('projectDir: ', projectDir);
 
   // Reset and setup the Next.js fixture
   console.log('[Global Setup] Setting up Next.js fixture...');
@@ -18,5 +15,5 @@ export default async function globalSetup() {
   const zeroUiCli = await loadCliFromFixture(projectDir);
   await zeroUiCli([]);
 
-  console.log('[Global Setup] Next.js fixture setup complete!');
+  console.log('[Global Setup] ✅ Next.js fixture setup complete!✅');
 } 

…re/__tests__/helpers/globalSetup.vite.js packages/core/__tests__/e2e/viteSetup.jspackages/core/__tests__/helpers/globalSetup.vite.js renamed to packages/core/__tests__/e2e/viteSetup.js packages/core/__tests__/helpers/globalSetup.vite.js renamed to packages/core/__tests__/e2e/viteSetup.js

@@ -1,6 +1,5 @@
-// packages/core/__tests__/helpers/globalSetup.vite.js
-import { resetZeroUiState } from './resetProjectState.js';
-import { loadCliFromFixture } from './loadCli.js';
+import { resetZeroUiState } from '../helpers/resetProjectState.js';
+import { loadCliFromFixture } from '../helpers/loadCli.js';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -16,5 +15,5 @@ export default async function globalSetup() {
   const zeroUiCli = await loadCliFromFixture(projectDir);
   await zeroUiCli([]);
 
-  console.log('[Global Setup] Vite fixture setup complete!');
+  console.log('[Global Setup] ✅ Vite fixture setup complete!✅');
 } 

packages/core/__tests__/helpers/globalSetup.next.js

@@ -6,14 +6,15 @@ export async function loadCliFromFixture(fixtureDir) {
   const r = createRequire(path.join(fixtureDir, 'package.json'));
   const modulePath = r.resolve('../../../src/cli/init.cjs');   // get the path
   const mod = r(modulePath);  // actually require the module
-
+  console.log('[Global Setup] Loaded CLI from fixture:', modulePath);
   // Return a wrapper function that changes directory before running CLI
   const wrappedCli = async (args = []) => {
     const originalCwd = process.cwd();
     try {
       process.chdir(fixtureDir);  // Change to fixture directory
 
       // The init.cjs exports a cli function, so call it
+
       if (typeof mod === 'function') {
         return await Promise.resolve(mod(args));  // run the CLI
       } else if (typeof mod.default === 'function') {
@@ -23,6 +24,7 @@ export async function loadCliFromFixture(fixtureDir) {
       }
     } finally {
       process.chdir(originalCwd);  // Always restore original directory
+      console.log('[Global Setup] Restored original directory:', originalCwd);
     }
   };
 

packages/core/__tests__/helpers/loadCli.js

@@ -15,15 +15,12 @@ const fixtures = [
 for (const dir of fixtures) {
   const pkgJson = join(dir, "package.json");
 
-  // 1: Install base deps
-  execSync(`pnpm --dir ${dir} install --silent`, { stdio: "inherit" });
-
-  // 2: Inject the packed tarball
+  // 1: Inject the packed tarball
   execSync(`pnpm --dir ${dir} add ${join(dist, pkg)}`, { stdio: "inherit" });
 
-  // 3: Re-install to resolve tree
-  execSync(`pnpm --dir ${dir} install --silent`, { stdio: "inherit" });
+  // 2: Install to resolve tree
+  execSync(`pnpm --dir ${dir} install`, { stdio: "inherit" });
 
-  // ✅ 4: Undo changes to package.json
+  // 3: Undo changes to package.json
   execSync(`git restore ${pkgJson}`, { stdio: "inherit" });
 }