vitest-browser-qwik 0.0.7 → 0.0.9

package/README.md

@@ -5,7 +5,7 @@ A modern testing setup demonstrating browser-based testing for Qwik components u
 ## Getting Started
 
 ```bash
-pnpm add vitest-browser-qwik
+npm install -D vitest-browser-qwik
 ```
 
 ## Core Features
@@ -15,6 +15,27 @@ pnpm add vitest-browser-qwik
 - **`renderHook`** - Hook testing utilities (currently only CSR supported)
 - All functions are async for predictable testing behavior
 
+## Vitest Config Setup
+
+```tsx
+import { defineConfig } from 'vitest/config'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+
+// optional, run the tests in SSR mode
+import { testSSR } from 'vitest-browser-qwik/ssr-plugin'
+
+export default defineConfig({
+  plugins: [testSSR(), qwikVite()],
+  test: {
+    browser: {
+      enabled: true,
+      provider: 'playwright',
+      instances: [{ browser: 'chromium' }]
+    },
+  },
+})
+```
+
 ### Client-Side Rendering Example
 
 ```tsx
@@ -113,6 +134,10 @@ test('renders with custom container', async () => {
 - **SSR Context**: `renderSSR` executes components in a Node.js context separate from your test files, providing true server-side rendering simulation
 - **Same Interface**: Both CSR and SSR provide the same testing interface, making it easy to test both rendering modes
 
+## Compatibility
+In testing, we have observed render issues with Vite 5.x. We recommend using Vite 6+. Qwik 1 currently specifies Vite 5.x,
+but Vite 6.x should work as well.
+
 ## Limitations
 
 - For `renderSSR` you must always import the component from another file, local components are not supported. This is because this would require importing the vitest context, or moving local components into separate files dynamically, which involves a lot of unwanted complexity.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { RenderResult, SSRRenderOptions, cleanup$1 as cleanup, render$1 as render, renderHook$1 as renderHook, renderServerHTML$1 as renderServerHTML } from "./pure-CoHVQ6I9.js";
+import { RenderResult, SSRRenderOptions, cleanup$1 as cleanup, render$1 as render, renderHook$1 as renderHook, renderServerHTML$1 as renderServerHTML } from "./pure-Cwz8HPNP.js";
 import { JSXOutput } from "@builder.io/qwik";
 
 //#region src/index.d.ts

package/dist/index.js

@@ -1,4 +1,4 @@
-import { cleanup, render, renderHook, renderServerHTML } from "./pure-CGnRrG6t.js";
+import { cleanup, render, renderHook, renderServerHTML } from "./pure-BWRD5UQA.js";
 import { page } from "@vitest/browser/context";
 import { beforeEach } from "vitest";
 
@@ -8,8 +8,8 @@ page.extend({
 	renderServerHTML,
 	[Symbol.for("vitest:component-cleanup")]: cleanup
 });
-beforeEach(() => {
-	cleanup();
+beforeEach(async () => {
+	await cleanup();
 });
 
 //#endregion

package/dist/{pure-CGnRrG6t.js → pure-BWRD5UQA.js}

@@ -83,7 +83,7 @@ async function renderHook(hook) {
 		}
 	};
 }
-function cleanup() {
+async function cleanup() {
 	mountedContainers.forEach((container) => {
 		container.innerHTML = "";
 		if (container.parentNode === document.body) document.body.removeChild(container);

package/dist/{pure-CoHVQ6I9.d.ts → pure-Cwz8HPNP.d.ts}

@@ -31,6 +31,6 @@ interface RenderHookResult<Result> {
   unmount: () => void;
 }
 declare function renderHook<Result>(hook: () => Result): Promise<RenderHookResult<Result>>;
-declare function cleanup(): void;
+declare function cleanup(): Promise<void>;
 //#endregion
 export { RenderHookResult, RenderOptions, RenderResult, SSRRenderOptions, cleanup as cleanup$1, render$1, renderHook as renderHook$1, renderServerHTML as renderServerHTML$1 };

package/dist/pure.d.ts

@@ -1,2 +1,2 @@
-import { RenderHookResult, RenderOptions, RenderResult, SSRRenderOptions, cleanup$1 as cleanup, render$1 as render, renderHook$1 as renderHook, renderServerHTML$1 as renderServerHTML } from "./pure-CoHVQ6I9.js";
+import { RenderHookResult, RenderOptions, RenderResult, SSRRenderOptions, cleanup$1 as cleanup, render$1 as render, renderHook$1 as renderHook, renderServerHTML$1 as renderServerHTML } from "./pure-Cwz8HPNP.js";
 export { RenderHookResult, RenderOptions, RenderResult, SSRRenderOptions, cleanup, render, renderHook, renderServerHTML };

package/dist/pure.js

@@ -1,3 +1,3 @@
-import { cleanup, render, renderHook, renderServerHTML } from "./pure-CGnRrG6t.js";
+import { cleanup, render, renderHook, renderServerHTML } from "./pure-BWRD5UQA.js";
 
 export { cleanup, render, renderHook, renderServerHTML };

package/dist/ssr-plugin.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from "vitest/config";
+
+//#region src/ssr-plugin.d.ts
+declare function testSSR(): Plugin;
+//#endregion
+export { testSSR };

package/dist/ssr-plugin.js

@@ -0,0 +1,248 @@
+import { dirname, relative, resolve } from "node:path";
+import { symbolMapper } from "@builder.io/qwik/optimizer";
+
+//#region src/ssr-plugin.ts
+function traverseChildren(node, callback) {
+	for (const key in node) {
+		const child = node[key];
+		if (Array.isArray(child)) {
+			for (const item of child) if (item && typeof item === "object" && callback(item)) return true;
+		} else if (child && typeof child === "object") {
+			if (callback(child)) return true;
+		}
+	}
+	return false;
+}
+async function hasRenderSSRCall(code, filename) {
+	try {
+		const { parseSync } = await import("oxc-parser");
+		const ast = parseSync(filename, code);
+		const renderSSRIdentifiers = new Set(["renderSSR"]);
+		let hasRenderSSRCallInCode = false;
+		function walkForDetection(node) {
+			if (!node || typeof node !== "object") return false;
+			if (node.type === "ImportDeclaration") {
+				const importDecl = node;
+				if (!importDecl.source?.value || !importDecl.specifiers) return false;
+				for (const spec of importDecl.specifiers) if (spec.type === "ImportSpecifier") {
+					const importSpec = spec;
+					if (importSpec.imported.type !== "Identifier") continue;
+					if (importSpec.imported.name === "renderSSR") renderSSRIdentifiers.add(importSpec.local.name);
+				} else if (spec.type === "ImportDefaultSpecifier") {
+					const defaultSpec = spec;
+					if (defaultSpec.local.name.toLowerCase().includes("renderssr")) renderSSRIdentifiers.add(defaultSpec.local.name);
+				}
+			}
+			if (node.type === "FunctionDeclaration") {
+				const funcDecl = node;
+				if (funcDecl.id?.name === "renderSSR") renderSSRIdentifiers.add("renderSSR");
+			}
+			if (node.type === "TSDeclareFunction") {
+				const declareFunc = node;
+				if (declareFunc.id?.name === "renderSSR") renderSSRIdentifiers.add("renderSSR");
+			}
+			if (node.type === "VariableDeclarator") {
+				const varDecl = node;
+				if (varDecl.id.type !== "Identifier") return false;
+				if (varDecl.init?.type !== "Identifier") return false;
+				if (!renderSSRIdentifiers.has(varDecl.init.name)) return false;
+				const bindingId = varDecl.id;
+				renderSSRIdentifiers.add(bindingId.name);
+			}
+			if (node.type === "CallExpression") {
+				const callExpr = node;
+				if (callExpr.callee.type === "Identifier") {
+					if (renderSSRIdentifiers.has(callExpr.callee.name)) {
+						hasRenderSSRCallInCode = true;
+						return true;
+					}
+				}
+			}
+			return traverseChildren(node, walkForDetection);
+		}
+		walkForDetection(ast);
+		const hasCallsInString = code.includes("renderSSR(");
+		const result = hasRenderSSRCallInCode || hasCallsInString;
+		return result;
+	} catch (error) {
+		console.warn(`Failed to parse ${filename} for renderSSR detection, falling back to string check:`, error);
+		return code.includes("renderSSR");
+	}
+}
+function resolveComponentPath(importPath, testFileId) {
+	if (!importPath.startsWith(".")) return importPath.endsWith(".tsx") || importPath.endsWith(".ts") ? importPath : `${importPath}.tsx`;
+	const testFileDir = dirname(testFileId);
+	const resolvedPath = resolve(testFileDir, importPath);
+	const projectRoot = process.cwd();
+	let componentPath = `./${relative(projectRoot, resolvedPath)}`;
+	if (!componentPath.endsWith(".tsx") && !componentPath.endsWith(".ts")) componentPath += ".tsx";
+	return componentPath;
+}
+function extractPropsFromJSX(attributes, sourceCode) {
+	const props = {};
+	for (const attr of attributes) {
+		if (attr.type !== "JSXAttribute") continue;
+		const jsxAttr = attr;
+		if (jsxAttr.name.type !== "JSXIdentifier") continue;
+		const propName = jsxAttr.name.name;
+		if (!jsxAttr.value) continue;
+		if (jsxAttr.value.type === "JSXExpressionContainer") {
+			const container = jsxAttr.value;
+			if (container.expression.type !== "JSXEmptyExpression") {
+				const exprSpan = container.expression;
+				const expressionCode = sourceCode.slice(exprSpan.start, exprSpan.end);
+				props[propName] = expressionCode;
+			}
+		} else if (jsxAttr.value.type === "Literal") {
+			const literal = jsxAttr.value;
+			props[propName] = JSON.stringify(literal.value);
+		}
+	}
+	return props;
+}
+function isTestFile(id) {
+	return id.includes(".test.") || id.includes(".spec.");
+}
+function hasCommandsImport(node) {
+	if (node.type !== "ImportDeclaration") return false;
+	const importDecl = node;
+	if (importDecl.source?.value !== "@vitest/browser/context") return false;
+	if (!importDecl.specifiers) return false;
+	return importDecl.specifiers.some((spec) => spec.type === "ImportSpecifier" && spec.imported.type === "Identifier" && spec.imported.name === "commands");
+}
+const renderSSRCommand = async (ctx, componentPath, componentName, props = {}) => {
+	try {
+		const projectRoot = process.cwd();
+		const absoluteComponentPath = resolve(projectRoot, componentPath);
+		const viteServer = ctx.project.vite;
+		for (const [key, value] of Object.entries(viteServer.config.env)) viteServer.config.define[`__vite_ssr_import_meta__.env.${key}`] = JSON.stringify(value);
+		const componentModule = await viteServer.ssrLoadModule(absoluteComponentPath);
+		const Component = componentModule[componentName];
+		if (!Component) throw new Error(`Component "${componentName}" not found in ${absoluteComponentPath}`);
+		const qwikModule = await viteServer.ssrLoadModule("@builder.io/qwik");
+		const { jsx } = qwikModule;
+		const jsxElement = jsx(Component, props);
+		const serverModule = await viteServer.ssrLoadModule("@builder.io/qwik/server");
+		const { renderToString } = serverModule;
+		const result = await renderToString(jsxElement, {
+			containerTagName: "div",
+			base: "/",
+			qwikLoader: { include: "always" },
+			symbolMapper: globalThis.qwikSymbolMapper
+		});
+		return { html: result.html };
+	} catch (error) {
+		console.error("SSR Command Error:", error);
+		throw error;
+	}
+};
+function testSSR() {
+	return {
+		name: "vitest:ssr-transform",
+		enforce: "pre",
+		async transform(code, id) {
+			if (!isTestFile(id)) return null;
+			if (!await hasRenderSSRCall(code, id)) return null;
+			try {
+				const { parseSync } = await import("oxc-parser");
+				const MagicString = (await import("magic-string")).default;
+				const ast = parseSync(id, code);
+				const s = new MagicString(code);
+				const componentImports = new Map();
+				const renderSSRIdentifiers = new Set(["renderSSR"]);
+				let hasExistingCommandsImport = false;
+				function walkForTransformation(node) {
+					if (!node || typeof node !== "object") return;
+					if (node.type === "ImportDeclaration") {
+						const importDecl = node;
+						if (importDecl.source?.value && importDecl.specifiers) {
+							const source = importDecl.source.value;
+							for (const spec of importDecl.specifiers) if (spec.type === "ImportSpecifier") {
+								const importSpec = spec;
+								if (importSpec.imported.type === "Identifier") {
+									componentImports.set(importSpec.imported.name, source);
+									if (importSpec.imported.name === "renderSSR") renderSSRIdentifiers.add(importSpec.local.name);
+								}
+							} else if (spec.type === "ImportDefaultSpecifier") {
+								const defaultSpec = spec;
+								if (defaultSpec.local.name.toLowerCase().includes("renderssr")) renderSSRIdentifiers.add(defaultSpec.local.name);
+							}
+						}
+					}
+					if (node.type === "VariableDeclarator") {
+						const varDecl = node;
+						if (varDecl.id.type === "Identifier" && varDecl.init?.type === "Identifier" && renderSSRIdentifiers.has(varDecl.init.name)) {
+							const bindingId = varDecl.id;
+							renderSSRIdentifiers.add(bindingId.name);
+						}
+					}
+					if (hasCommandsImport(node)) hasExistingCommandsImport = true;
+					if (node.type === "CallExpression") {
+						const callExpr = node;
+						if (callExpr.callee.type === "Identifier" && renderSSRIdentifiers.has(callExpr.callee.name)) {
+							const jsxArg = callExpr.arguments?.[0];
+							if (jsxArg?.type === "JSXElement") {
+								const jsxElement = jsxArg;
+								if (jsxElement.openingElement?.name?.type === "JSXIdentifier") {
+									const componentName = jsxElement.openingElement.name.name;
+									const componentImportPath = componentImports.get(componentName);
+									if (componentImportPath) {
+										const componentPath = resolveComponentPath(componentImportPath, id);
+										const props = extractPropsFromJSX(jsxElement.openingElement.attributes || [], code);
+										let propsStr = "";
+										if (Object.keys(props).length > 0) {
+											const propsEntries = Object.entries(props).map(([key, value]) => {
+												return `${JSON.stringify(key)}: ${value}`;
+											});
+											propsStr = `, { ${propsEntries.join(", ")} }`;
+										}
+										const replacement = `(async () => {
+											const { html } = await commands.renderSSR("${componentPath}", "${componentName}"${propsStr});
+											return renderServerHTML(html);
+										})()`;
+										const spanNode = node;
+										s.overwrite(spanNode.start, spanNode.end, replacement);
+									}
+								}
+							}
+						}
+					}
+					traverseChildren(node, walkForTransformation);
+					return;
+				}
+				walkForTransformation(ast);
+				if (!hasExistingCommandsImport && s.hasChanged()) {
+					let lastImportEnd = 0;
+					function findLastImport(node) {
+						if (!node || typeof node !== "object") return;
+						if (node.type === "ImportDeclaration") {
+							const spanNode = node;
+							lastImportEnd = Math.max(lastImportEnd, spanNode.end);
+						}
+						traverseChildren(node, findLastImport);
+						return void 0;
+					}
+					findLastImport(ast);
+					if (lastImportEnd > 0) s.appendLeft(lastImportEnd, "\nimport { commands } from \"@vitest/browser/context\";\nimport { renderServerHTML } from \"vitest-browser-qwik\";");
+				}
+				if (s.hasChanged()) return {
+					code: s.toString(),
+					map: s.generateMap({ hires: true })
+				};
+			} catch (error) {
+				console.warn(`Failed to transform ${id}:`, error);
+			}
+			return null;
+		},
+		configResolved(config) {
+			globalThis.qwikSymbolMapper = symbolMapper;
+			if (config.test?.browser?.enabled) config.test.browser.commands = {
+				...config.test.browser.commands,
+				renderSSR: renderSSRCommand
+			};
+		}
+	};
+}
+
+//#endregion
+export { testSSR };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-browser-qwik",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Render Qwik components using Vitest Browser Mode",
   "type": "module",
   "license": "MIT",
@@ -29,28 +29,35 @@
     "./pure": {
       "types": "./dist/pure.d.ts",
       "default": "./dist/pure.js"
+    },
+    "./ssr-plugin": {
+      "types": "./dist/ssr-plugin.d.ts",
+      "default": "./dist/ssr-plugin.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "magic-string": "^0.30.17",
+    "oxc-parser": "^0.73.2"
+  },
   "peerDependencies": {
     "@builder.io/qwik": "^1.14.1",
     "@vitest/browser": "^3.2.4",
+    "vite": ">=6.3.5",
     "vitest": "^3.1.3"
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.0",
     "@builder.io/qwik": "1.14.1",
     "@oxc-project/types": "^0.73.2",
+    "@playwright/test": "see flake.nix",
     "@types/node": "^22.15.17",
     "@vitest/browser": "^3.2.4",
     "bumpp": "^10.1.0",
-    "magic-string": "^0.30.17",
-    "oxc-parser": "^0.73.2",
     "oxc-resolver": "^11.2.0",
     "oxc-walker": "^0.3.0",
-    "@playwright/test": "see flake.nix",
     "tsdown": "^0.11.9",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",