@preact/signals-react 1.2.2 → 1.3.0

package/test/index.test.tsx

@@ -1,53 +1,81 @@
 // @ts-ignore-next-line
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
-import { signal, useComputed, useSignalEffect } from "@preact/signals-react";
-import { createElement, useMemo, memo, StrictMode, createRef } from "react";
-import { createRoot, Root } from "react-dom/client";
+import {
+	signal,
+	computed,
+	useComputed,
+	useSignalEffect,
+	useSignal,
+} from "@preact/signals-react";
+import {
+	createElement,
+	forwardRef,
+	useMemo,
+	useReducer,
+	memo,
+	StrictMode,
+	createRef,
+} from "react";
+
 import { renderToStaticMarkup } from "react-dom/server";
-import { act } from "react-dom/test-utils";
+import { createRoot, Root, act, checkHangingAct } from "./utils";
 
 describe("@preact/signals-react", () => {
 	let scratch: HTMLDivElement;
 	let root: Root;
-	function render(element: Parameters<Root["render"]>[0]) {
-		act(() => root.render(element));
+
+	async function render(element: Parameters<Root["render"]>[0]) {
+		await act(() => root.render(element));
 	}
 
-	beforeEach(() => {
+	beforeEach(async () => {
 		scratch = document.createElement("div");
-		root = createRoot(scratch);
+		document.body.appendChild(scratch);
+		root = await createRoot(scratch);
 	});
 
-	afterEach(() => {
-		act(() => root.unmount());
+	afterEach(async () => {
+		checkHangingAct();
+		await act(() => root.unmount());
+		scratch.remove();
 	});
 
 	describe("Text bindings", () => {
-		it("should render text without signals", () => {
-			render(<span>test</span>);
+		it("should render text without signals", async () => {
+			await render(<span>test</span>);
 			const span = scratch.firstChild;
 			const text = span?.firstChild;
 			expect(text).to.have.property("data", "test");
 		});
 
-		it("should render Signals as Text", () => {
+		it("should render Signals as Text", async () => {
 			const sig = signal("test");
-			render(<span>{sig}</span>);
+			await render(<span>{sig}</span>);
 			const span = scratch.firstChild;
 			expect(span).to.have.property("firstChild").that.is.an.instanceOf(Text);
 			const text = span?.firstChild;
 			expect(text).to.have.property("data", "test");
 		});
 
-		it("should update Signal-based Text (no parent component)", () => {
+		it("should render computed as Text", async () => {
 			const sig = signal("test");
-			render(<span>{sig}</span>);
+			const comp = computed(() => `${sig} ${sig}`);
+			await render(<span>{comp}</span>);
+			const span = scratch.firstChild;
+			expect(span).to.have.property("firstChild").that.is.an.instanceOf(Text);
+			const text = span?.firstChild;
+			expect(text).to.have.property("data", "test test");
+		});
+
+		it("should update Signal-based Text (no parent component)", async () => {
+			const sig = signal("test");
+			await render(<span>{sig}</span>);
 
 			const text = scratch.firstChild!.firstChild!;
 			expect(text).to.have.property("data", "test");
 
-			act(() => {
+			await act(() => {
 				sig.value = "changed";
 			});
 
@@ -57,17 +85,17 @@ describe("@preact/signals-react", () => {
 			expect(text).to.have.property("data", "changed");
 		});
 
-		it("should update Signal-based Text (in a parent component)", () => {
+		it("should update Signal-based Text (in a parent component)", async () => {
 			const sig = signal("test");
 			function App({ x }: { x: typeof sig }) {
 				return <span>{x}</span>;
 			}
-			render(<App x={sig} />);
+			await render(<App x={sig} />);
 
 			const text = scratch.firstChild!.firstChild!;
 			expect(text).to.have.property("data", "test");
 
-			act(() => {
+			await act(() => {
 				sig.value = "changed";
 			});
 
@@ -79,7 +107,7 @@ describe("@preact/signals-react", () => {
 	});
 
 	describe("Component bindings", () => {
-		it("should subscribe to signals", () => {
+		it("should subscribe to signals", async () => {
 			const sig = signal("foo");
 
 			function App() {
@@ -87,16 +115,16 @@ describe("@preact/signals-react", () => {
 				return <p>{value}</p>;
 			}
 
-			render(<App />);
+			await render(<App />);
 			expect(scratch.textContent).to.equal("foo");
 
-			act(() => {
+			await act(() => {
 				sig.value = "bar";
 			});
 			expect(scratch.textContent).to.equal("bar");
 		});
 
-		it("should activate signal accessed in render", () => {
+		it("should activate signal accessed in render", async () => {
 			const sig = signal(null);
 
 			function App() {
@@ -111,11 +139,14 @@ describe("@preact/signals-react", () => {
 				return <p>{str}</p>;
 			}
 
-			const fn = () => render(<App />);
-			expect(fn).not.to.throw;
+			try {
+				await render(<App />);
+			} catch (e: any) {
+				expect.fail(e.stack);
+			}
 		});
 
-		it("should not subscribe to child signals", () => {
+		it("should not subscribe to child signals", async () => {
 			const sig = signal("foo");
 
 			function Child() {
@@ -129,10 +160,10 @@ describe("@preact/signals-react", () => {
 				return <Child />;
 			}
 
-			render(<App />);
+			await render(<App />);
 			expect(scratch.textContent).to.equal("foo");
 
-			act(() => {
+			await act(() => {
 				sig.value = "bar";
 			});
 			expect(spy).to.be.calledOnce;
@@ -148,20 +179,40 @@ describe("@preact/signals-react", () => {
 
 			function App() {
 				sig.value;
-				return useMemo(() => <Inner foo={1} />, []);
+				return useMemo(() => <Inner />, []);
 			}
 
-			render(<App />);
+			await render(<App />);
 			expect(scratch.textContent).to.equal("foo");
 
-			act(() => {
+			await act(() => {
+				sig.value = "bar";
+			});
+			expect(scratch.textContent).to.equal("bar");
+		});
+
+		it("should update forwardRef'ed component via signals", async () => {
+			const sig = signal("foo");
+
+			const Inner = forwardRef(() => {
+				return <p>{sig.value}</p>;
+			});
+
+			function App() {
+				return <Inner />;
+			}
+
+			await render(<App />);
+			expect(scratch.textContent).to.equal("foo");
+
+			await act(() => {
 				sig.value = "bar";
 			});
 			expect(scratch.textContent).to.equal("bar");
 		});
 
 		it("should consistently rerender in strict mode", async () => {
-			const sig = signal<string>(null!);
+			const sig = signal(-1);
 
 			const Test = () => <p>{sig.value}</p>;
 			const App = () => (
@@ -170,18 +221,19 @@ describe("@preact/signals-react", () => {
 				</StrictMode>
 			);
 
-			for (let i = 0; i < 3; i++) {
-				const value = `${i}`;
+			await render(<App />);
+			expect(scratch.textContent).to.equal("-1");
 
-				act(() => {
-					sig.value = value;
-					render(<App />);
+			for (let i = 0; i < 3; i++) {
+				await act(async () => {
+					sig.value = i;
 				});
-				expect(scratch.textContent).to.equal(value);
+				expect(scratch.textContent).to.equal("" + i);
 			}
 		});
+
 		it("should consistently rerender in strict mode (with memo)", async () => {
-			const sig = signal<string>(null!);
+			const sig = signal(-1);
 
 			const Test = memo(() => <p>{sig.value}</p>);
 			const App = () => (
@@ -190,16 +242,17 @@ describe("@preact/signals-react", () => {
 				</StrictMode>
 			);
 
-			for (let i = 0; i < 3; i++) {
-				const value = `${i}`;
+			await render(<App />);
+			expect(scratch.textContent).to.equal("-1");
 
-				act(() => {
-					sig.value = value;
-					render(<App />);
+			for (let i = 0; i < 3; i++) {
+				await act(async () => {
+					sig.value = i;
 				});
-				expect(scratch.textContent).to.equal(value);
+				expect(scratch.textContent).to.equal("" + i);
 			}
 		});
+
 		it("should render static markup of a component", async () => {
 			const count = signal(0);
 
@@ -211,16 +264,87 @@ describe("@preact/signals-react", () => {
 					</pre>
 				);
 			};
+
+			await render(<Test />);
+			expect(scratch.textContent).to.equal("<code>0</code><code>0</code>");
+
 			for (let i = 0; i < 3; i++) {
-				act(() => {
+				await act(async () => {
 					count.value += 1;
-					render(<Test />);
 				});
 				expect(scratch.textContent).to.equal(
 					`<code>${count.value}</code><code>${count.value}</code>`
 				);
 			}
 		});
+
+		it("should correctly render components that have useReducer()", async () => {
+			const count = signal(0);
+
+			let increment: () => void;
+			const Test = () => {
+				const [state, dispatch] = useReducer(
+					(state: number, action: number) => {
+						return state + action;
+					},
+					-2
+				);
+
+				increment = () => dispatch(1);
+
+				const doubled = count.value * 2;
+
+				return (
+					<pre>
+						<code>{state}</code>
+						<code>{doubled}</code>
+					</pre>
+				);
+			};
+
+			await render(<Test />);
+			expect(scratch.innerHTML).to.equal(
+				"<pre><code>-2</code><code>0</code></pre>"
+			);
+
+			for (let i = 0; i < 3; i++) {
+				await act(async () => {
+					count.value += 1;
+				});
+				expect(scratch.innerHTML).to.equal(
+					`<pre><code>-2</code><code>${count.value * 2}</code></pre>`
+				);
+			}
+
+			await act(() => {
+				increment();
+			});
+			expect(scratch.innerHTML).to.equal(
+				`<pre><code>-1</code><code>${count.value * 2}</code></pre>`
+			);
+		});
+	});
+
+	describe("useSignal()", () => {
+		it("should create a signal from a primitive value", async () => {
+			function App() {
+				const count = useSignal(1);
+				return (
+					<div>
+						{count}
+						<button onClick={() => count.value++}>Increment</button>
+					</div>
+				);
+			}
+
+			await render(<App />);
+			expect(scratch.textContent).to.equal("1Increment");
+
+			await act(() => {
+				scratch.querySelector("button")!.click();
+			});
+			expect(scratch.textContent).to.equal("2Increment");
+		});
 	});
 
 	describe("useSignalEffect()", () => {
@@ -245,7 +369,7 @@ describe("@preact/signals-react", () => {
 				);
 			}
 
-			render(<App />);
+			await render(<App />);
 			expect(scratch.textContent).to.equal("foo");
 
 			expect(spy).to.have.been.calledOnceWith(
@@ -256,7 +380,7 @@ describe("@preact/signals-react", () => {
 
 			spy.resetHistory();
 
-			act(() => {
+			await act(() => {
 				sig.value = "bar";
 			});
 
@@ -294,7 +418,7 @@ describe("@preact/signals-react", () => {
 				);
 			}
 
-			render(<App />);
+			await render(<App />);
 
 			expect(cleanup).not.to.have.been.called;
 			expect(spy).to.have.been.calledOnceWith(
@@ -304,7 +428,7 @@ describe("@preact/signals-react", () => {
 			);
 			spy.resetHistory();
 
-			act(() => {
+			await act(() => {
 				sig.value = "bar";
 			});
 
@@ -336,16 +460,18 @@ describe("@preact/signals-react", () => {
 				return <p ref={ref}>{sig.value}</p>;
 			}
 
-			render(<App />);
+			await render(<App />);
 
 			const child = scratch.firstElementChild;
 
+			expect(scratch.innerHTML).to.equal("<p>foo</p>");
 			expect(cleanup).not.to.have.been.called;
 			expect(spy).to.have.been.calledOnceWith("foo", child);
 			spy.resetHistory();
 
-			render(null);
+			await render(null);
 
+			expect(scratch.innerHTML).to.equal("");
 			expect(spy).not.to.have.been.called;
 			expect(cleanup).to.have.been.calledOnce;
 			// @note: React cleans up the ref eagerly, so it's already null by the time the callback runs.

package/test/react-router.test.tsx

@@ -0,0 +1,49 @@
+// @ts-ignore-next-line
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+import { signal } from "@preact/signals-react";
+import { createElement } from "react";
+import { Route, Routes, MemoryRouter } from "react-router-dom";
+
+import { act, checkHangingAct, createRoot, Root } from "./utils";
+
+describe("@preact/signals-react", () => {
+	let scratch: HTMLDivElement;
+	let root: Root;
+	async function render(element: Parameters<Root["render"]>[0]) {
+		await act(() => root.render(element));
+	}
+
+	beforeEach(async () => {
+		scratch = document.createElement("div");
+		document.body.appendChild(scratch);
+		root = await createRoot(scratch);
+	});
+
+	afterEach(async () => {
+		checkHangingAct();
+		await act(() => root.unmount());
+		scratch.remove();
+	});
+
+	describe("react-router-dom", () => {
+		it("Route component should render", async () => {
+			const name = signal("World")!;
+
+			function App() {
+				return (
+					<MemoryRouter>
+						<Routes>
+							<Route path="/page1" element={<div>Page 1</div>}></Route>
+							<Route path="*" element={<div>Hello {name}!</div>}></Route>
+						</Routes>
+					</MemoryRouter>
+				);
+			}
+
+			await render(<App />);
+
+			expect(scratch.innerHTML).to.equal("<div>Hello World!</div>");
+		});
+	});
+});

package/test/utils.ts

@@ -0,0 +1,67 @@
+import { act as realAct } from "react-dom/test-utils";
+
+export interface Root {
+	render(element: JSX.Element | null): void;
+	unmount(): void;
+}
+
+// We need to use createRoot() if it's available, but it's only available in
+// React 18. To enable local testing with React 16 & 17, we'll create a fake
+// createRoot() that uses render() and unmountComponentAtNode() instead.
+let createRootCache: ((container: Element) => Root) | undefined;
+export async function createRoot(container: Element): Promise<Root> {
+	if (!createRootCache) {
+		try {
+			// @ts-expect-error ESBuild will replace this import with a require() call
+			// if it resolves react-dom/client. If it doesn't, it will leave the
+			// import untouched causing a runtime error we'll handle below.
+			const { createRoot } = await import("react-dom/client");
+			createRootCache = createRoot;
+		} catch (e) {
+			// @ts-expect-error ESBuild will replace this import with a require() call
+			// if it resolves react-dom.
+			const { render, unmountComponentAtNode } = await import("react-dom");
+			createRootCache = (container: Element) => ({
+				render(element: JSX.Element) {
+					render(element, container);
+				},
+				unmount() {
+					unmountComponentAtNode(container);
+				},
+			});
+		}
+	}
+
+	return createRootCache(container);
+}
+
+// When testing using react's production build, we can't use act (React
+// explicitly throws an error in this situation). So instead we'll fake act by
+// just waiting 10ms for React's concurrent rerendering to flush. We'll make a
+// best effort to throw a helpful error in afterEach if we detect that act() was
+// called but not awaited.
+const delay = (ms: number) => new Promise(r => setTimeout(r, ms));
+
+let acting = 0;
+async function prodActShim(cb: () => void | Promise<void>): Promise<void> {
+	acting++;
+	try {
+		await cb();
+		await delay(10);
+	} finally {
+		acting--;
+	}
+}
+
+export function checkHangingAct() {
+	if (acting > 0) {
+		throw new Error(
+			`It appears act() was called but not awaited. This could happen if a test threw an Error or if a test forgot to await a call to act. Make sure to await act() calls in tests.`
+		);
+	}
+}
+
+export const act =
+	process.env.NODE_ENV === "production"
+		? (prodActShim as typeof realAct)
+		: realAct;