Add tests

Author: JoviDeCroock

packages/react/runtime/test/browser/suspense.test.tsx

@@ -2,7 +2,7 @@
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 import { createElement, lazy, useLayoutEffect, Suspense } from "react";
-import { signal } from "@preact/signals-core";
+import { signal, Signal } from "@preact/signals-core";
 import {
 	useComputed,
 	useSignalEffect,
@@ -20,6 +20,7 @@ import { beforeEach, afterEach, describe, it, expect } from "vitest";
 describe("Suspense", () => {
 	let scratch: HTMLDivElement;
 	let root: Root;
+	let originalSubscribe: typeof Signal.prototype._subscribe;
 
 	async function render(element: Parameters<Root["render"]>[0]) {
 		await act(() => root.render(element));
@@ -30,6 +31,7 @@ describe("Suspense", () => {
 		document.body.appendChild(scratch);
 		root = await createRoot(scratch);
 		getConsoleErrorSpy().mockClear();
+		originalSubscribe = Signal.prototype._subscribe;
 	});
 
 	afterEach(async () => {
@@ -41,6 +43,7 @@ describe("Suspense", () => {
 		//
 		// checkConsoleErrorLogs();
 		checkHangingAct();
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 	});
 
 	it("should handle suspending and unsuspending", async () => {
@@ -123,15 +126,19 @@ describe("Suspense", () => {
 			signal1.value++;
 			signal2.value++;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
+
 		await act(async () => {
 			signal1.value--;
 			signal2.value--;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 
 		await act(async () => {
 			resolveMiddleProm();
 			await middleProm;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 
 		expect(scratch.innerHTML).to.be.oneOf([
 			// react 17+
@@ -144,6 +151,7 @@ describe("Suspense", () => {
 			unsuspend();
 			await prom;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 
 		// react 16 uses `style.setProperty()` to clear display value, which leaves an empty style attr in innerHTML.
 		// react 17 does not do this, so we normalize 16 behavior to 17 here.
@@ -158,6 +166,8 @@ describe("Suspense", () => {
 			signal1.value++;
 			signal2.value++;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
+
 		expect(scratch.innerHTML).to.equal(
 			`<p>1</p><div data-foo="1"><span>lazy</span></div>`
 		);
@@ -237,6 +247,7 @@ describe("Suspense", () => {
 
 		// Initial render - should trigger watched callback
 		await render(<Parent />);
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.contain("Loading first...");
 		expect(scratch.innerHTML).to.contain("Loading second...");
 		expect(scratch.innerHTML).to.contain("Regular");
@@ -250,6 +261,7 @@ describe("Suspense", () => {
 			resolveFirstProm();
 			await firstProm;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 
 		expect(scratch.innerHTML).to.contain("First");
 		expect(scratch.innerHTML).to.contain("Loading second...");
@@ -259,6 +271,7 @@ describe("Suspense", () => {
 			resolveSecondProm();
 			await secondProm;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 
 		expect(scratch.innerHTML).to.contain("First");
 		expect(scratch.innerHTML).to.contain("Second");
@@ -268,6 +281,7 @@ describe("Suspense", () => {
 		await act(async () => {
 			trackedSignal.value = 42;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 
 		expect(scratch.innerHTML).to.contain('data-parent="42"');
 		expect(scratch.innerHTML).to.contain('data-regular="42"');
@@ -282,7 +296,7 @@ describe("Suspense", () => {
 		expect(scratch.innerHTML).to.equal("");
 
 		// Wait for cleanup to complete
-		await new Promise(resolve => setTimeout(resolve, 10));
+		await new Promise(resolve => setTimeout(resolve, 100));
 
 		// After unmount, the signal should be unwatched
 		expect(unwatchedCallCount).to.be.greaterThan(0);
@@ -386,6 +400,7 @@ describe("Suspense", () => {
 
 		// Initial render - should trigger watched callback
 		await render(<Parent />);
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.contain("Loading first...");
 		expect(scratch.innerHTML).to.contain("Loading second...");
 		expect(scratch.innerHTML).to.contain("Regular");
@@ -400,6 +415,7 @@ describe("Suspense", () => {
 			await firstProm;
 		});
 
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.contain("First");
 		expect(scratch.innerHTML).to.contain("Loading second...");
 
@@ -409,6 +425,7 @@ describe("Suspense", () => {
 			await secondProm;
 		});
 
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.contain("First");
 		expect(scratch.innerHTML).to.contain("Second");
 		expect(scratch.innerHTML).to.contain("Regular");
@@ -418,6 +435,7 @@ describe("Suspense", () => {
 			trackedSignal.value = 42;
 		});
 
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.contain('data-parent="42"');
 		expect(scratch.innerHTML).to.contain('data-regular="42"');
 		expect(scratch.innerHTML).to.contain('data-first="42"');
@@ -428,10 +446,11 @@ describe("Suspense", () => {
 			root.unmount();
 		});
 
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.equal("");
 
 		// Wait for cleanup to complete
-		await new Promise(resolve => setTimeout(resolve, 10));
+		await new Promise(resolve => setTimeout(resolve, 100));
 
 		// After unmount, the signal should be unwatched
 		expect(unwatchedCallCount).to.be.greaterThan(0);
@@ -479,6 +498,7 @@ describe("Suspense", () => {
 
 		// Initial render - should trigger watched callback
 		await render(<Parent />);
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.contain("Regular");
 
 		// Signal should be watched by now
@@ -489,6 +509,7 @@ describe("Suspense", () => {
 		await act(async () => {
 			trackedSignal.value = 10;
 		});
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 
 		expect(scratch.innerHTML).to.contain('data-parent="10"');
 		expect(scratch.innerHTML).to.contain('data-regular="10"');
@@ -498,6 +519,7 @@ describe("Suspense", () => {
 			trackedSignal.value = 20;
 		});
 
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.contain('data-parent="20"');
 		expect(scratch.innerHTML).to.contain('data-regular="20"');
 
@@ -509,10 +531,11 @@ describe("Suspense", () => {
 			root.unmount();
 		});
 
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 		expect(scratch.innerHTML).to.equal("");
 
 		// Wait for cleanup to complete
-		await new Promise(resolve => setTimeout(resolve, 10));
+		await new Promise(resolve => setTimeout(resolve, 100));
 
 		// After unmount, the signal should be unwatched
 		expect(unwatchedCallCount).to.be.greaterThan(0);

packages/react/runtime/test/browser/useSignals.test.tsx

@@ -16,6 +16,7 @@ const MANAGED_HOOK = 2;
 describe("useSignals", () => {
 	let scratch: HTMLDivElement;
 	let root: Root;
+	let originalSubscribe: typeof Signal.prototype._subscribe;
 
 	async function render(element: Parameters<Root["render"]>[0]) {
 		await act(() => root.render(element));
@@ -54,6 +55,7 @@ describe("useSignals", () => {
 		document.body.appendChild(scratch);
 		root = await createRoot(scratch);
 		getConsoleErrorSpy().mockClear();
+		originalSubscribe = Signal.prototype._subscribe;
 	});
 
 	afterEach(async () => {
@@ -65,6 +67,7 @@ describe("useSignals", () => {
 		//
 		// checkConsoleErrorLogs();
 		checkHangingAct();
+		expect(Signal.prototype._subscribe).to.equal(originalSubscribe);
 	});
 
 	it("should rerender components when signals they use change", async () => {