@preact/signals-react 1.3.0 → 1.3.2

package/test/node/renderToStaticMarkup.test.tsx

@@ -0,0 +1,24 @@
+import { signal, useSignalEffect } from "@preact/signals-react";
+import { expect } from "chai";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import sinon from "sinon";
+import { mountSignalsTests } from "../shared/mounting";
+
+describe("renderToStaticMarkup", () => {
+	mountSignalsTests(renderToStaticMarkup);
+
+	it("should not invoke useSignalEffect", async () => {
+		const spy = sinon.spy();
+		const sig = signal("foo");
+
+		function App() {
+			useSignalEffect(() => spy(sig.value));
+			return <p>{sig.value}</p>;
+		}
+
+		const html = await renderToStaticMarkup(<App />);
+		expect(html).to.equal("<p>foo</p>");
+		expect(spy.called).to.be.false;
+	});
+});

package/test/node/setup.js

@@ -0,0 +1,52 @@
+// import register from "@babel/register";
+const register = require("@babel/register").default;
+
+const coverage = String(process.env.COVERAGE) === "true";
+
+// @babel/register doesn't hook into the experimental NodeJS ESM loader API so
+// we need all test files to run as CommonJS modules in Node
+const env = [
+	"@babel/preset-env",
+	{
+		targets: {
+			node: "current",
+		},
+		loose: true,
+		modules: "commonjs",
+	},
+];
+
+const jsx = [
+	"@babel/preset-react",
+	{
+		runtime: "classic",
+		pragma: "createElement",
+		pragmaFrag: "Fragment",
+	},
+];
+
+const ts = [
+	"@babel/preset-typescript",
+	{
+		jsxPragma: "createElement",
+		jsxPragmaFrag: "Fragment",
+	},
+];
+
+register({
+	extensions: [".js", ".mjs", ".ts", ".tsx", ".mts", ".mtsx"],
+	cache: true,
+
+	sourceMaps: "inline",
+	presets: [ts, jsx, env],
+	plugins: [
+		coverage && [
+			"istanbul",
+			{
+				// TODO: Currently NodeJS tests always run against dist files. Should we
+				// change this?
+				// include: minify ? "**/dist/**/*.js" : "**/src/**/*.{js,jsx,ts,tsx}",
+			},
+		],
+	].filter(Boolean),
+});

package/test/shared/mounting.tsx

@@ -0,0 +1,184 @@
+// @ts-ignore-next-line
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+import {
+	signal,
+	computed,
+	useComputed,
+	useSignal,
+} from "@preact/signals-react";
+import { expect } from "chai";
+import { createElement, useReducer, StrictMode, useState } from "react";
+
+import { getConsoleErrorSpy, checkConsoleErrorLogs } from "./utils";
+
+export function mountSignalsTests(
+	render: (element: JSX.Element) => string | Promise<string>
+) {
+	beforeEach(async () => {
+		getConsoleErrorSpy().resetHistory();
+	});
+
+	afterEach(async () => {
+		checkConsoleErrorLogs();
+	});
+
+	describe("mount text bindings", () => {
+		it("should render text without signals", async () => {
+			const html = await render(<span>test</span>);
+			expect(html).to.equal("<span>test</span>");
+		});
+
+		it("should render Signals as Text", async () => {
+			const sig = signal("test");
+			const html = await render(<span>{sig}</span>);
+			expect(html).to.equal("<span>test</span>");
+		});
+
+		it("should render computed as Text", async () => {
+			const sig = signal("test");
+			const comp = computed(() => `${sig} ${sig}`);
+			const html = await render(<span>{comp}</span>);
+			expect(html).to.equal("<span>test test</span>");
+		});
+	});
+
+	describe("mount component bindings", () => {
+		it("should mount component with signals as text", async () => {
+			const sig = signal("foo");
+
+			function App() {
+				const value = sig.value;
+				return <p>{value}</p>;
+			}
+
+			const html = await render(<App />);
+			expect(html).to.equal("<p>foo</p>");
+		});
+
+		it("should activate signal accessed in render", async () => {
+			const sig = signal(null);
+
+			function App() {
+				const arr = useComputed(() => {
+					// trigger read
+					sig.value;
+
+					return [];
+				});
+
+				const str = arr.value.join(", ");
+				return <p>{str}</p>;
+			}
+
+			try {
+				await render(<App />);
+			} catch (e: any) {
+				expect.fail(e.stack);
+			}
+		});
+
+		it("should properly mount in strict mode", async () => {
+			const sig = signal(-1);
+
+			const Test = () => <p>{sig.value}</p>;
+			const App = () => (
+				<StrictMode>
+					<Test />
+				</StrictMode>
+			);
+
+			const html = await render(<App />);
+			expect(html).to.equal("<p>-1</p>");
+		});
+
+		it("should correctly mount components that have useReducer()", async () => {
+			const count = signal(0);
+
+			const Test = () => {
+				const [state] = useReducer((state: number, action: number) => {
+					return state + action;
+				}, -2);
+
+				const doubled = count.value * 2;
+
+				return (
+					<pre>
+						<code>{state}</code>
+						<code>{doubled}</code>
+					</pre>
+				);
+			};
+
+			const html = await render(<Test />);
+			expect(html).to.equal("<pre><code>-2</code><code>0</code></pre>");
+		});
+
+		it("should not fail when a component calls setState while mounting", async () => {
+			function App() {
+				const [state, setState] = useState(0);
+				if (state == 0) {
+					setState(1);
+				}
+
+				return <div>{state}</div>;
+			}
+
+			const html = await render(<App />);
+			expect(html).to.equal("<div>1</div>");
+		});
+
+		it("should not fail when a component calls setState multiple times while mounting", async () => {
+			function App() {
+				const [state, setState] = useState(0);
+				if (state < 5) {
+					setState(state + 1);
+				}
+
+				return <div>{state}</div>;
+			}
+
+			const html = await render(<App />);
+			expect(html).to.equal("<div>5</div>");
+		});
+	});
+
+	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>
+				);
+			}
+
+			const html = await render(<App />);
+			expect(html).to.equal("<div>1<button>Increment</button></div>");
+		});
+
+		it("should properly update signal values changed during mount", async () => {
+			function App() {
+				const count = useSignal(0);
+				if (count.value == 0) {
+					count.value++;
+				}
+
+				return (
+					<div>
+						{count}
+						<button onClick={() => count.value++}>Increment</button>
+					</div>
+				);
+			}
+
+			const html = await render(<App />);
+			expect(html).to.equal("<div>1<button>Increment</button></div>");
+
+			const html2 = await render(<App />);
+			expect(html2).to.equal("<div>1<button>Increment</button></div>");
+		});
+	});
+}

package/test/shared/utils.ts

@@ -0,0 +1,126 @@
+import React from "react";
+import sinon from "sinon";
+import { act as realAct } from "react-dom/test-utils";
+
+export interface Root {
+	render(element: JSX.Element | null): void;
+	unmount(): void;
+}
+
+export const isProd = process.env.NODE_ENV === "production";
+export const isReact16 = React.version.startsWith("16.");
+
+// 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
+// waiting for a requestAnimationFrame and then 10ms for React's concurrent
+// rerendering and any effects 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 afterFrame = (ms: number) =>
+	new Promise(r => requestAnimationFrame(() => setTimeout(r, ms)));
+
+let acting = 0;
+async function prodActShim(cb: () => void | Promise<void>): Promise<void> {
+	acting++;
+	try {
+		await cb();
+		await afterFrame(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;
+
+/**
+ * `console.log` supports formatting strings with `%s` for string substitutions.
+ * This function accepts a string and additional arguments of values and returns
+ * a string with the values substituted in.
+ */
+export function consoleFormat(str: string, ...values: unknown[]): string {
+	let idx = 0;
+	return str.replace(/%s/g, () => String(values[idx++]));
+}
+
+declare global {
+	let errorSpy: sinon.SinonSpy | undefined;
+}
+
+// Only one spy can be active on an object at a time and since all tests share
+// the same console object we need to make sure we're only spying on it once.
+// We'll use this method to share the spy across all tests.
+export function getConsoleErrorSpy(): sinon.SinonSpy {
+	if (typeof errorSpy === "undefined") {
+		(globalThis as any).errorSpy = sinon.spy(console, "error");
+	}
+
+	return errorSpy!;
+}
+
+const messagesToIgnore = [
+	// Ignore errors for timeouts of tests that often happen while debugging
+	/async tests and hooks,/,
+	// Ignore React 16 warnings about awaiting `act` calls (warning removed in React 18)
+	/Do not await the result of calling act/,
+	// Ignore how chai or mocha uses `console.error` to print out errors
+	/AssertionError/,
+];
+
+export function checkConsoleErrorLogs(): void {
+	const errorSpy = getConsoleErrorSpy();
+	if (errorSpy.called) {
+		let message: string;
+		if (errorSpy.firstCall.args[0].toString().includes("%s")) {
+			message = consoleFormat(...errorSpy.firstCall.args);
+		} else {
+			message = errorSpy.firstCall.args.join(" ");
+		}
+
+		if (messagesToIgnore.every(re => re.test(message) === false)) {
+			expect.fail(
+				`Console.error was unexpectedly called with this message: \n${message}`
+			);
+		}
+	}
+}

package/test/utils.ts

@@ -1,67 +0,0 @@
-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;