Update e2e tests to Next 16 (webpack) (#1016)

Author: vicb

.changeset/cold-rivers-bathe.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+Update e2e tests to Next 16 (webpack)

examples/bugs/gh-219/package.json

@@ -40,7 +40,7 @@
 		"zod": "^3.24.1"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20241224.0",
+		"@cloudflare/workers-types": "catalog:",
 		"@eslint/eslintrc": "^3",
 		"@opennextjs/cloudflare": "workspace:*",
 		"@playwright/test": "catalog:",

examples/bugs/gh-223/package.json

@@ -21,7 +21,7 @@
 		"react-dom": "^19.0.0"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20241224.0",
+		"@cloudflare/workers-types": "catalog:",
 		"@opennextjs/cloudflare": "workspace:*",
 		"@playwright/test": "catalog:",
 		"@types/node": "^22.10.2",

examples/create-next-app/tsconfig.json

@@ -19,7 +19,8 @@
 		],
 		"paths": {
 			"@/*": ["./src/*"]
-		}
+		},
+		"target": "ES2017"
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules", "open-next.config.ts"]

examples/e2e/app-pages-router/app/parallel/layout.tsx

@@ -9,29 +9,13 @@ export default function Layout({ a, b, children }: { children: ReactNode; a: Rea
 
 	return (
 		<div>
-			<div className="flex flex-col mb-10">
-				<label htmlFor="a">
-					Enable A
-					<input
-						name="a"
-						type="checkbox"
-						checked={routeA}
-						onChange={(e) => {
-							setRouteA(e.target.checked);
-						}}
-					/>
-				</label>
-				<label htmlFor="b">
-					Enable B
-					<input
-						name="b"
-						type="checkbox"
-						checked={routeB}
-						onChange={(e) => {
-							setRouteB(e.target.checked);
-						}}
-					/>
-				</label>
+			<div className="flex flex-col items-start mb-10">
+				<button onClick={() => setRouteA(!routeA)} data-testid="enable-a">
+					{routeA ? "Disable A" : "Enable A"}
+				</button>
+				<button onClick={() => setRouteB(!routeB)} data-testid="enable-b">
+					{routeB ? "Disable B" : "Enable B"}
+				</button>
 			</div>
 
 			{routeA && a}

examples/e2e/app-pages-router/e2e/parallel.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("Parallel routes", async ({ page }) => {
 	await page.goto("/");
-	await page.locator('[href="/parallel"]').click();
+	await page.getByRole("link", { name: "Parallel" }).click();
 
 	await page.waitForURL("/parallel");
 
@@ -13,13 +13,13 @@ test("Parallel routes", async ({ page }) => {
 	await expect(routeB).not.toBeVisible();
 
 	// Enable A, which should be visible but not B
-	await page.locator('input[name="a"]').check();
+	await page.getByTestId("enable-a").click();
 	routeA = page.getByText("Parallel Route A");
 	await expect(routeA).toBeVisible();
 	await expect(routeB).not.toBeVisible();
 
 	// Enable B, both should be visible
-	await page.locator('input[name="b"]').check();
+	await page.getByTestId("enable-b").click();
 	routeB = page.getByText("Parallel Route B");
 	await expect(routeA).toBeVisible();
 	await expect(routeB).toBeVisible();

examples/e2e/app-pages-router/next.config.ts

@@ -3,15 +3,10 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
 	poweredByHeader: false,
 	cleanDistDir: true,
-	transpilePackages: ["@example/shared"],
 	output: "standalone",
-	// outputFileTracingRoot: "../sst",
 	typescript: {
 		ignoreBuildErrors: true,
 	},
-	eslint: {
-		ignoreDuringBuilds: true,
-	},
 	trailingSlash: true,
 	skipTrailingSlashRedirect: true,
 };

examples/e2e/app-pages-router/package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"openbuild": "node ../../packages/open-next/dist/index.js build --build-command \"npx turbo build\"",
 		"dev": "next dev --turbopack --port 3003",
-		"build": "next build",
+		"build": "next build --webpack",
 		"start": "next start --port 3003",
 		"lint": "next lint",
 		"clean": "rm -rf .turbo node_modules .next .open-next",

examples/e2e/app-pages-router/tsconfig.json

@@ -12,7 +12,7 @@
 		"moduleResolution": "NodeNext",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"incremental": true,
 		"plugins": [
 			{
@@ -24,6 +24,13 @@
 			"@example/shared": ["../shared"]
 		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../utils.ts"],
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		"../utils.ts",
+		".next/dev/types/**/*.ts"
+	],
 	"exclude": ["node_modules", "open-next.config.ts"]
 }

examples/e2e/app-router/app/api/after/revalidate/route.ts

@@ -6,7 +6,10 @@ export function POST() {
 		() =>
 			new Promise<void>((resolve) =>
 				setTimeout(() => {
-					revalidateTag("date");
+					revalidateTag("date", {
+						// We want to expire the "date" tag immediately
+						expire: 0,
+					});
 					resolve();
 				}, 5000)
 			)