feat: vitest 4 migration

Author: thejackshelton-kunaico

package.json

@@ -60,23 +60,23 @@
 	},
 	"peerDependencies": {
 		"@builder.io/qwik": ">=1.14.1",
-		"@vitest/browser": "^3.2.4",
+		"@vitest/browser-playwright": "^4.0.0",
 		"vite": ">=6.3.5",
-		"vitest": "^3.1.3"
+		"vitest": "^4.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.0.0",
 		"@builder.io/qwik": "^1.15",
 		"@oxc-project/types": "^0.73.2",
 		"@playwright/test": "see flake.nix",
 		"@types/node": "^22.15.17",
-		"@vitest/browser": "^3.2.4",
+		"@vitest/browser-playwright": "^4.0.0",
 		"bumpp": "^10.1.0",
 		"oxc-resolver": "^11.2.0",
 		"oxc-walker": "^0.3.0",
 		"tsdown": "^0.11.9",
 		"typescript": "^5.8.3",
-		"vitest": "^3.1.3"
+		"vitest": "^4.0.0"
 	},
 	"pnpm": {
 		"overrides": {

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import type { JSXNode, JSXOutput } from "@builder.io/qwik";
-import { page } from "@vitest/browser/context";
 import { beforeEach } from "vitest";
+import { page } from "vitest/browser";
 import { cleanup, type RenderResult, render, renderServerHTML } from "./pure";
 
 export function renderSSR(jsxNode: JSXOutput): Promise<RenderResult> {
@@ -32,7 +32,7 @@ beforeEach(async () => {
 	await cleanup();
 });
 
-declare module "@vitest/browser/context" {
+declare module "vitest/browser" {
 	interface BrowserPage {
 		render: typeof render;
 		renderServerHTML: typeof renderServerHTML;

src/index.ts

@@ -1,12 +1,10 @@
 import type { JSXOutput } from "@builder.io/qwik";
 import { component$, render as qwikRender } from "@builder.io/qwik";
 import { getQwikLoaderScript } from "@builder.io/qwik/server";
-import type { Locator, LocatorSelectors } from "@vitest/browser/context";
-import {
-	debug,
-	getElementLocatorSelectors,
-	type PrettyDOMOptions,
-} from "@vitest/browser/utils";
+import type { Locator, LocatorSelectors } from "vitest/browser";
+import { type PrettyDOMOptions, utils } from "vitest/browser";
+
+const { debug, getElementLocatorSelectors } = utils;
 
 export interface RenderResult extends LocatorSelectors {
 	container: HTMLElement;

src/pure.tsx

@@ -216,7 +216,7 @@ export function resolveComponentPath(
 export function hasCommandsImport(node: Node): boolean {
 	if (
 		!isImportDeclaration(node) ||
-		node.source?.value !== "@vitest/browser/context" ||
+		node.source?.value !== "vitest/browser" ||
 		!node.specifiers
 	) {
 		return false;

src/ssr-plugin-utils.ts

@@ -299,7 +299,7 @@ export function testSSR(): Plugin {
 					if (lastImportEnd > 0) {
 						s.appendLeft(
 							lastImportEnd,
-							'\nimport { commands } from "@vitest/browser/context";\nimport { renderServerHTML } from "vitest-browser-qwik";',
+							'\nimport { commands } from "vitest/browser";\nimport { renderServerHTML } from "vitest-browser-qwik";',
 						);
 					}
 				}

src/ssr-plugin.ts

@@ -1,7 +1,7 @@
 import { component$, useSignal } from "@builder.io/qwik";
-import { page } from "@vitest/browser/context";
 // import { Button } from "react-aria-components";
 import { expect, test } from "vitest";
+import { page } from "vitest/browser";
 import { render } from "../src/index";
 import { Counter } from "./fixtures/Counter";
 import { HelloWorld } from "./fixtures/HelloWorld";

test/render.test.tsx

@@ -210,7 +210,7 @@ describe("SSR Transform Plugin", () => {
 			expect(result.code).toContain('"Counter"');
 			expect(result.code).toContain('"initialCount": 5');
 			expect(result.code).toContain(
-				'import { commands } from "@vitest/browser/context"',
+				'import { commands } from "vitest/browser"',
 			);
 		});
 
@@ -260,19 +260,19 @@ describe("SSR Transform Plugin", () => {
 			const transform = plugin.transform as TransformFunction;
 
 			const code = `
-				import { commands } from "@vitest/browser/context";
-				import { Counter } from "./fixtures/Counter";
-				
-				test("example", () => {
-					renderSSR(<Counter />);
-				});
-			`;
+			import { commands } from "vitest/browser";
+			import { Counter } from "./fixtures/Counter";
+			
+			test("example", () => {
+				renderSSR(<Counter />);
+			});
+		`;
 
 			const result = await transform(code, "/test/existing-commands.test.tsx");
 			expect(result).not.toBeNull();
 			// Should not add duplicate import
 			const importMatches = result.code.match(
-				/import.*commands.*from.*@vitest\/browser\/context/g,
+				/import.*commands.*from.*vitest\/browser/g,
 			);
 			expect(importMatches).toHaveLength(1);
 		});

test/ssr-plugin.test.ts

@@ -1,8 +1,27 @@
 import { defineConfig } from "tsdown";
 
-export default defineConfig({
-	entry: ["./src/index.ts", "./src/pure.tsx", "./src/ssr-plugin.ts"],
-	format: ["esm"],
-	dts: true,
-	platform: "browser",
-});
+export default defineConfig([
+	{
+		entry: ["./src/index.ts", "./src/pure.tsx"],
+		format: ["esm"],
+		dts: true,
+		platform: "browser",
+	},
+	{
+		entry: ["./src/ssr-plugin.ts"],
+		format: ["esm"],
+		dts: true,
+		platform: "neutral",
+		external: [
+			/^node:/,
+			"oxc-parser",
+			"oxc-resolver",
+			"magic-string",
+			"@builder.io/qwik",
+			"@builder.io/qwik/optimizer",
+			"@builder.io/qwik/server",
+			"vitest/config",
+			"vitest/node",
+		],
+	},
+]);

tsdown.config.ts

@@ -1,15 +1,20 @@
 import { qwikVite } from "@builder.io/qwik/optimizer";
+import { playwright } from "@vitest/browser-playwright";
 import { defineConfig } from "vitest/config";
 import { testSSR } from "./src/ssr-plugin";
 
 export default defineConfig({
 	plugins: [testSSR(), qwikVite()],
 	test: {
+		testTimeout: 2000,
 		browser: {
 			enabled: true,
-			provider: "playwright",
+			provider: playwright({
+				launchOptions: {
+					headless: false,
+				},
+			}),
 			instances: [{ browser: "chromium" }],
-			headless: true,
 		},
 		exclude: ["node_modules", "test/ssr-plugin.test.ts"],
 	},