external deps example

Author: alexeyraspopov

examples/react/external.spec.tsx

@@ -0,0 +1,34 @@
+import { test } from "rollwright";
+import { expect } from "@playwright/test";
+import alias from "@rollup/plugin-alias";
+
+test.use({
+	plugins: [
+		alias({
+			entries: [
+				{
+					find: /(react|react-dom)(\/.+|$)/,
+					replacement: "https://esm.sh/[email protected]$2",
+					customResolver: (id) => ({ id, external: true }),
+				},
+			],
+		}),
+	],
+});
+
+test("external", async ({ execute, page }) => {
+	let root = await execute(async () => {
+		let { createRoot } = await import("react-dom/client");
+		let section = document.createElement("section");
+		document.body.append(section);
+		let root = createRoot(section);
+		return root;
+	});
+
+	await execute(async (root) => {
+		let { jsx } = await import("react/jsx-runtime");
+		root.render(jsx("h1", { children: "Hello" }));
+	}, root);
+
+	await expect(page.locator("h1")).toContainText("Hello");
+});