mix lib wrappers spec

examples/react/fixtures.ts

@@ -7,10 +7,12 @@ import esbuild from "rollup-plugin-esbuild";
 
 import { type JSHandle, type Locator } from "@playwright/test";
 import { type ReactNode } from "react";
-import { type Root } from "react-dom/client";
+
+import * as Sinon from "sinon";
 
 export let test = base.extend<{
 	mount: ConnectFn<ReactNode | Promise<ReactNode>, Locator>;
+	sinon: <T>(fn: (lib: typeof Sinon) => T) => Promise<JSHandle<T>>;
 }>({
 	plugins: [
 		esbuild({ jsx: "automatic", target: "es2022", exclude: [/node_modules/] }),
@@ -25,19 +27,15 @@ export let test = base.extend<{
 	],
 	mount: [
 		async ({ execute, page }, use) => {
-			let root: JSHandle<Root | null> = null as any;
+			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 use(async function mount(fn, ...args) {
-				if (root == null) {
-					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;
-					});
-				}
-
 				let node = await execute(fn, ...args);
 				await execute((root, node) => root?.render(node), root, node);
 				return page.locator("section >> internal:control=component");
@@ -47,4 +45,8 @@ export let test = base.extend<{
 		},
 		{ scope: "test" },
 	],
+	sinon: async ({ execute }, use) => {
+		let sinon = await execute(() => import("sinon"));
+		await use((fn) => execute(fn, sinon));
+	},
 });

examples/react/package.json

@@ -13,6 +13,7 @@
     "@types/node": "^20.11.28",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
+    "@types/sinon": "^17.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-esbuild": "^6.1.1",

examples/react/wrappers.spec.tsx

@@ -0,0 +1,11 @@
+import { test } from "./fixtures";
+import { expect } from "@playwright/test";
+
+test("wrappers", async ({ sinon, mount }) => {
+	let stub = await sinon((lib) => lib.stub());
+	let button = await mount((cb) => <button onClick={cb}>Click</button>, stub);
+
+	await button.click();
+
+	expect(await stub.evaluate((mock) => mock.callCount)).toEqual(1);
+});