@preact/signals-react 1.3.5 → 1.3.7

package/test/node/renderToStaticMarkup.test.tsx

@@ -1,22 +0,0 @@
-import { signal, useSignalEffect } from "@preact/signals-react";
-import { createElement } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-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/shared/mounting.tsx

@@ -1,184 +0,0 @@
-// @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 SignalValue", async () => {
-			const sig = signal("test");
-			const html = await render(<span>{sig}</span>);
-			expect(html).to.equal("<span>test</span>");
-		});
-
-		it("should render computed as SignalValue", 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

@@ -1,127 +0,0 @@
-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")) {
-			const firstArg = errorSpy.firstCall.args[0];
-			message = consoleFormat(firstArg, ...errorSpy.firstCall.args.slice(1));
-		} 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}`
-			);
-		}
-	}
-}