Refactor playground tests to only create browser page if needed (#12360)

jamesopstad · web-flow · commit 12afd8047298 · 2026-02-02T14:16:15.000Z
diff --git a/packages/vite-plugin-cloudflare/playground/__test-utils__/responses.ts b/packages/vite-plugin-cloudflare/playground/__test-utils__/responses.ts
@@ -1,25 +1,15 @@
-import { page, viteTestUrl } from "./index";
+import { viteTestUrl } from "./index";
 
 export async function getTextResponse(path = "/"): Promise<string> {
 	const response = await getResponse(path);
 	return response.text();
 }
 
-export async function getJsonResponse(
-	path = "/"
-): Promise<null | Record<string, unknown> | Array<unknown>> {
+export async function getJsonResponse(path = "/"): Promise<unknown> {
 	const response = await getResponse(path);
-	const text = await response.text();
-	try {
-		return JSON.parse(text);
-	} catch {
-		throw new Error("Invalid JSON response:\n" + text);
-	}
+	return response.json();
 }
 
-export async function getResponse(path = "/") {
-	const url = `${viteTestUrl}${path}`;
-	const response = page.waitForResponse(url);
-	await page.goto(url);
-	return response;
+export async function getResponse(path = "/"): Promise<Response> {
+	return fetch(`${viteTestUrl}${path}`);
 }
diff --git a/packages/vite-plugin-cloudflare/playground/additional-modules/__tests__/additional-modules.spec.ts b/packages/vite-plugin-cloudflare/playground/additional-modules/__tests__/additional-modules.spec.ts
@@ -6,6 +6,8 @@ import {
 	viteTestUrl,
 } from "../../__test-utils__";
 
+export const browserMode = true;
+
 test("supports Data modules with a '.bin' extension", async () => {
 	const result = await getJsonResponse("/bin");
 	expect(result).toEqual({ byteLength: 342936 });
diff --git a/packages/vite-plugin-cloudflare/playground/assets/__tests__/assets.spec.ts b/packages/vite-plugin-cloudflare/playground/assets/__tests__/assets.spec.ts
@@ -2,6 +2,8 @@ import { expect, test } from "vitest";
 import { getResponse, page, viteTestUrl } from "../../__test-utils__";
 import "./base-tests";
 
+export const browserMode = true;
+
 test("fetches transformed HTML asset", async () => {
 	await page.goto(`${viteTestUrl}/transformed-html-asset`);
 	const content = await page.textContent("h1");
@@ -10,8 +12,8 @@ test("fetches transformed HTML asset", async () => {
 
 test("fetches original public directory asset if requested directly", async () => {
 	const response = await getResponse("/public-image.svg");
-	const contentType = await response.headerValue("content-type");
-	const additionalHeader = await response.headerValue("additional-header");
+	const contentType = response.headers.get("content-type");
+	const additionalHeader = response.headers.get("additional-header");
 	expect(contentType).toBe("image/svg+xml");
 	expect(additionalHeader).toBe(null);
 });
diff --git a/packages/vite-plugin-cloudflare/playground/assets/__tests__/base-tests.ts b/packages/vite-plugin-cloudflare/playground/assets/__tests__/base-tests.ts
@@ -3,16 +3,16 @@ import { getResponse, getTextResponse } from "../../__test-utils__";
 
 test("fetches public directory asset", async () => {
 	const response = await getResponse("/public-directory-asset");
-	const contentType = await response.headerValue("content-type");
-	const additionalHeader = await response.headerValue("additional-header");
+	const contentType = response.headers.get("content-type");
+	const additionalHeader = response.headers.get("additional-header");
 	expect(contentType).toBe("image/svg+xml");
 	expect(additionalHeader).toBe("public-directory-asset");
 });
 
 test("fetches imported asset", async () => {
 	const response = await getResponse("/imported-asset");
-	const contentType = await response.headerValue("content-type");
-	const additionalHeader = await response.headerValue("additional-header");
+	const contentType = response.headers.get("content-type");
+	const additionalHeader = response.headers.get("additional-header");
 	expect(contentType).toBe("image/svg+xml");
 	expect(additionalHeader).toBe("imported-asset");
 });
@@ -24,8 +24,8 @@ test("fetches imported asset with url suffix", async () => {
 
 test("fetches inline asset", async () => {
 	const response = await getResponse("/inline-asset");
-	const contentType = await response.headerValue("content-type");
-	const additionalHeader = await response.headerValue("additional-header");
+	const contentType = response.headers.get("content-type");
+	const additionalHeader = response.headers.get("additional-header");
 	expect(contentType).toBe("image/svg+xml");
 	expect(additionalHeader).toBe("inline-asset");
 });
diff --git a/packages/vite-plugin-cloudflare/playground/assets/__tests__/public-dir-only/assets.spec.ts b/packages/vite-plugin-cloudflare/playground/assets/__tests__/public-dir-only/assets.spec.ts
@@ -10,7 +10,7 @@ import {
 
 test("fetches public directory asset", async () => {
 	const response = await getResponse("/public-image.svg");
-	const contentType = await response.headerValue("content-type");
+	const contentType = response.headers.get("content-type");
 	expect(contentType).toBe("image/svg+xml");
 });
 
diff --git a/packages/vite-plugin-cloudflare/playground/custom-build-app/__tests__/custom-build-app.spec.ts b/packages/vite-plugin-cloudflare/playground/custom-build-app/__tests__/custom-build-app.spec.ts
@@ -6,6 +6,8 @@ import {
 	serverLogs,
 } from "../../__test-utils__";
 
+export const browserMode = true;
+
 test("returns the index.html page", async () => {
 	const content = await page.textContent("h1");
 	expect(content).toBe("HTML page");
diff --git a/packages/vite-plugin-cloudflare/playground/errors/__tests__/errors.spec.ts b/packages/vite-plugin-cloudflare/playground/errors/__tests__/errors.spec.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test } from "vitest";
 import { isBuild, page, viteTestUrl } from "../../__test-utils__";
 
+export const browserMode = true;
+
 describe.runIf(!isBuild)(
 	"error thrown in the default export of the entry Worker",
 	async () => {
diff --git a/packages/vite-plugin-cloudflare/playground/hot-channel/__tests__/hot-channel.spec.ts b/packages/vite-plugin-cloudflare/playground/hot-channel/__tests__/hot-channel.spec.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test } from "vitest";
 import { isBuild, page, serverLogs, viteTestUrl } from "../../__test-utils__";
 
+export const browserMode = true;
+
 describe.runIf(!isBuild)("hot-channel", () => {
 	test("receives custom events sent from the dev server to the Worker", async () => {
 		await page.goto(viteTestUrl);
diff --git a/packages/vite-plugin-cloudflare/playground/importable-env/__tests__/importable-env.spec.ts b/packages/vite-plugin-cloudflare/playground/importable-env/__tests__/importable-env.spec.ts
@@ -1,7 +1,9 @@
 import { expect, test } from "vitest";
-import { getJsonResponse, serverLogs } from "../../__test-utils__";
+import { getJsonResponse, getResponse, serverLogs } from "../../__test-utils__";
 
 test("the importable env is accessible from outside the request handler", async () => {
+	await getResponse();
+
 	expect(serverLogs.info.join()).toMatch(
 		/outside of request handler: importedEnv\["importable-env_VAR"\] === "my importable env variable"/
 	);
diff --git a/packages/vite-plugin-cloudflare/playground/node-env/__tests__/node-env.spec.ts b/packages/vite-plugin-cloudflare/playground/node-env/__tests__/node-env.spec.ts
@@ -1 +1,3 @@
 import "./base-tests";
+
+export const browserMode = true;
diff --git a/packages/vite-plugin-cloudflare/playground/node-env/__tests__/nodejs-compat/node-env.spec.ts b/packages/vite-plugin-cloudflare/playground/node-env/__tests__/nodejs-compat/node-env.spec.ts
@@ -1 +1,3 @@
 import "../base-tests";
+
+export const browserMode = true;
diff --git a/packages/vite-plugin-cloudflare/playground/partyserver/__tests__/partyserver.spec.ts b/packages/vite-plugin-cloudflare/playground/partyserver/__tests__/partyserver.spec.ts
@@ -1,6 +1,8 @@
 import { expect, test, vi } from "vitest";
 import { page, WAIT_FOR_OPTIONS } from "../../__test-utils__";
 
+export const browserMode = true;
+
 test("sends and receives PartyServer messages", async () => {
 	const sendButton = page.getByRole("button", { name: "Send message" });
 	const messageTextBefore = await page.textContent("p");
diff --git a/packages/vite-plugin-cloudflare/playground/prerendering/__tests__/prerendering.spec.ts b/packages/vite-plugin-cloudflare/playground/prerendering/__tests__/prerendering.spec.ts
@@ -7,6 +7,8 @@ import {
 	viteTestUrl,
 } from "../../__test-utils__";
 
+export const browserMode = true;
+
 test("returns the server rendered route at /", async () => {
 	expect(await getTextResponse()).toEqual("Hello world");
 });
diff --git a/packages/vite-plugin-cloudflare/playground/react-spa/__tests__/experimental-headers-and-redirects/react-spa.spec.ts b/packages/vite-plugin-cloudflare/playground/react-spa/__tests__/experimental-headers-and-redirects/react-spa.spec.ts
@@ -9,6 +9,8 @@ import {
 	WAIT_FOR_OPTIONS,
 } from "../../../__test-utils__";
 
+export const browserMode = true;
+
 describe(
 	"react-spa (with experimental support)",
 	{ sequential: true, concurrent: false },
diff --git a/packages/vite-plugin-cloudflare/playground/react-spa/__tests__/react-spa.spec.ts b/packages/vite-plugin-cloudflare/playground/react-spa/__tests__/react-spa.spec.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test } from "vitest";
 import { failsIf, isBuild, page, viteTestUrl } from "../../__test-utils__";
 
+export const browserMode = true;
+
 describe("react-spa", () => {
 	test("returns the correct home page", async () => {
 		const content = await page.textContent("h1");
diff --git a/packages/vite-plugin-cloudflare/playground/react-spa/__tests__/server-headers/react-spa.spec.ts b/packages/vite-plugin-cloudflare/playground/react-spa/__tests__/server-headers/react-spa.spec.ts
@@ -6,7 +6,7 @@ describe.runIf(!isBuild)(
 	() => {
 		test("adds headers to HTML responses", async () => {
 			const response = await getResponse();
-			const headers = await response.allHeaders();
+			const headers = Object.fromEntries(response.headers.entries());
 			expect(headers).toMatchObject({
 				"custom-string": "string-value",
 				"custom-string-array": "one, two, three",
@@ -16,7 +16,7 @@ describe.runIf(!isBuild)(
 
 		test("adds headers to non-HTML responses", async () => {
 			const response = await getResponse("/vite.svg");
-			const headers = await response.allHeaders();
+			const headers = Object.fromEntries(response.headers.entries());
 			expect(headers).toMatchObject({
 				"custom-string": "string-value",
 				"custom-string-array": "one, two, three",
diff --git a/packages/vite-plugin-cloudflare/playground/sensitive-files/__tests__/sensitive-files.spec.ts b/packages/vite-plugin-cloudflare/playground/sensitive-files/__tests__/sensitive-files.spec.ts
@@ -4,37 +4,37 @@ import { getResponse, getTextResponse, isBuild } from "../../__test-utils__";
 describe.skipIf(isBuild)("denies access to sensitive files in dev", () => {
 	test("denies access to .env", async () => {
 		const response = await getResponse("/.env");
-		expect(response.status()).toBe(403);
+		expect(response.status).toBe(403);
 	});
 
 	test("denies access to .env.*", async () => {
 		const response = await getResponse("/.env.staging");
-		expect(response.status()).toBe(403);
+		expect(response.status).toBe(403);
 	});
 
 	test("denies access to .dev.vars", async () => {
 		const response = await getResponse("/.dev.vars");
-		expect(response.status()).toBe(403);
+		expect(response.status).toBe(403);
 	});
 
 	test("denies access to .dev.vars.*", async () => {
 		const response = await getResponse("/.dev.vars.staging");
-		expect(response.status()).toBe(403);
+		expect(response.status).toBe(403);
 	});
 
 	test("denies access to .dev.vars in subdirectory", async () => {
 		const response = await getResponse("/worker-b/.dev.vars");
-		expect(response.status()).toBe(403);
+		expect(response.status).toBe(403);
 	});
 
 	test("denies access to .dev.vars.* in subdirectory", async () => {
 		const response = await getResponse("/worker-b/.dev.vars.staging");
-		expect(response.status()).toBe(403);
+		expect(response.status).toBe(403);
 	});
 
 	test("denies access to custom-sensitive-file", async () => {
 		const response = await getResponse("/custom-sensitive-file");
-		expect(response.status()).toBe(403);
+		expect(response.status).toBe(403);
 	});
 });
 
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/custom-output-directories/spa-with-api.spec.ts b/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/custom-output-directories/spa-with-api.spec.ts
@@ -4,6 +4,8 @@ import { describe, expect, test, vi } from "vitest";
 import { isBuild, rootDir, WAIT_FOR_OPTIONS } from "../../../__test-utils__";
 import "../base-tests";
 
+export const browserMode = true;
+
 describe.runIf(isBuild)("output directories", () => {
 	test("creates the correct output directories", async () => {
 		await vi.waitFor(() => {
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/https/spa-with-api.spec.ts b/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/https/spa-with-api.spec.ts
@@ -1 +1,3 @@
 import "../base-tests";
+
+export const browserMode = true;
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/run-worker-first/spa-with-api.spec.ts b/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/run-worker-first/spa-with-api.spec.ts
@@ -8,10 +8,12 @@ import {
 } from "../../../__test-utils__";
 import "../base-tests";
 
+export const browserMode = true;
+
 test("returns the home page via the Worker", async () => {
 	const response = await getResponse();
-	expect(await response.headerValue("content-type")).toContain("text/html");
-	expect(await response.headerValue("is-worker-response")).toBe("true");
+	expect(response.headers.get("content-type")).toContain("text/html");
+	expect(response.headers.get("is-worker-response")).toBe("true");
 });
 
 test("returns the Worker API response for matching navigation request ('sec-fetch-mode: navigate' header included)", async () => {
@@ -33,9 +35,9 @@ test("returns the Worker asset response for matching request", async () => {
 
 test("returns the Worker fallback response for not found route on navigation request ('sec-fetch-mode: navigate' header included)", async () => {
 	const response = await getResponse("/foo");
-	expect(response.status()).toBe(200);
-	expect(await response.headerValue("content-type")).toContain("text/html");
-	expect(await response.headerValue("is-worker-response")).toBe("true");
+	expect(response.status).toBe(200);
+	expect(response.headers.get("content-type")).toContain("text/html");
+	expect(response.headers.get("is-worker-response")).toBe("true");
 });
 
 test("returns the Worker fallback response for not found route on non-navigation request ('sec-fetch-mode: navigate' header not included)", async () => {
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/spa-with-api.spec.ts b/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/spa-with-api.spec.ts
@@ -11,10 +11,12 @@ import {
 } from "../../__test-utils__";
 import "./base-tests";
 
+export const browserMode = true;
+
 test("returns the home page directly without invoking the Worker", async () => {
 	const response = await getResponse();
-	expect(await response.headerValue("content-type")).toContain("text/html");
-	expect(await response.headerValue("is-worker-response")).toBe(null);
+	expect(response.headers.get("content-type")).toContain("text/html");
+	expect(response.headers.get("is-worker-response")).toBe(null);
 });
 
 test("returns the home page for not found route on navigation request ('sec-fetch-mode: navigate' header included)", async () => {
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/static-routing/spa-with-api.spec.ts b/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/static-routing/spa-with-api.spec.ts
@@ -8,10 +8,12 @@ import {
 } from "../../../__test-utils__";
 import "../base-tests";
 
+export const browserMode = true;
+
 test("returns the home page directly without invoking the Worker", async () => {
 	const response = await getResponse();
-	expect(await response.headerValue("content-type")).toContain("text/html");
-	expect(await response.headerValue("is-worker-response")).toBe(null);
+	expect(response.headers.get("content-type")).toContain("text/html");
+	expect(response.headers.get("is-worker-response")).toBe(null);
 });
 
 test("returns the Worker API response for positive `run_worker_first` rule on navigation request ('sec-fetch-mode: navigate' header included)", async () => {
diff --git a/packages/vite-plugin-cloudflare/playground/static-mpa/__tests__/static-mpa.spec.ts b/packages/vite-plugin-cloudflare/playground/static-mpa/__tests__/static-mpa.spec.ts
@@ -10,6 +10,8 @@ import {
 	viteTestUrl,
 } from "../../__test-utils__";
 
+export const browserMode = true;
+
 test("returns the correct home page", async () => {
 	const content = await page.textContent("h1");
 	expect(content).toBe("Home");
@@ -66,13 +68,13 @@ test("worker configs warnings are not present in the terminal", async () => {
 describe.runIf(isBuild)("_headers", () => {
 	test("applies exact headers", async () => {
 		const response = await getResponse("/contact");
-		const header = await response.headerValue("X-Header");
+		const header = response.headers.get("X-Header");
 		expect(header).toBe("exact-header");
 	});
 
 	test("applies splat headers", async () => {
 		const response = await getResponse("/vite.svg");
-		const header = await response.headerValue("X-Header");
+		const header = response.headers.get("X-Header");
 		expect(header).toBe("splat-header");
 	});
 });
diff --git a/packages/vite-plugin-cloudflare/playground/static/__tests__/static.spec.ts b/packages/vite-plugin-cloudflare/playground/static/__tests__/static.spec.ts
@@ -1,6 +1,8 @@
 import { expect, test } from "vitest";
 import { page } from "../../__test-utils__";
 
+export const browserMode = true;
+
 test("returns the correct home page", async () => {
 	const content = await page.textContent("h1");
 	expect(content).toBe("Vite + TypeScript");
diff --git a/packages/vite-plugin-cloudflare/playground/static/__tests__/with-api/static.spec.ts b/packages/vite-plugin-cloudflare/playground/static/__tests__/with-api/static.spec.ts
@@ -1,6 +1,8 @@
 import { expect, test } from "vitest";
 import { getJsonResponse, page } from "../../../__test-utils__";
 
+export const browserMode = true;
+
 test("returns the correct home page", async () => {
 	const content = await page.textContent("h1");
 	expect(content).toBe("Vite + TypeScript");
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/__tests__/https/streaming.spec.ts b/packages/vite-plugin-cloudflare/playground/streaming/__tests__/https/streaming.spec.ts
@@ -1 +1,3 @@
 import "../base-tests";
+
+export const browserMode = true;
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/__tests__/streaming.spec.ts b/packages/vite-plugin-cloudflare/playground/streaming/__tests__/streaming.spec.ts
@@ -1 +1,3 @@
 import "./base-tests";
+
+export const browserMode = true;
diff --git a/packages/vite-plugin-cloudflare/playground/vitest-setup.ts b/packages/vite-plugin-cloudflare/playground/vitest-setup.ts
diff --git a/packages/vite-plugin-cloudflare/playground/websockets/__tests__/websockets.spec.ts b/packages/vite-plugin-cloudflare/playground/websockets/__tests__/websockets.spec.ts
diff --git a/packages/vite-plugin-cloudflare/playground/worker-♫/__tests__/log-level-error/worker.spec.ts b/packages/vite-plugin-cloudflare/playground/worker-♫/__tests__/log-level-error/worker.spec.ts
diff --git a/packages/vite-plugin-cloudflare/playground/worker-♫/__tests__/log-level-warn/worker.spec.ts b/packages/vite-plugin-cloudflare/playground/worker-♫/__tests__/log-level-warn/worker.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
`1`	`1`	`import "./base-tests";`
	`2`	`+`
	`3`	`+export const browserMode = true;`