@uniflowed/react-testing 0.0.0-alpha.2 → 0.0.0-alpha.4

package/internal/dom.js

@@ -59,7 +59,45 @@ const FUNCTIONS = ["getComputedStyle", "requestAnimationFrame", "cancelAnimation
  * with no setter, and assigning to it throws. A test does not need it
  * replaced — it needs it to exist.
  */
-const OBJECTS = ["location", "history", "localStorage", "sessionStorage", "navigator"];
+const OBJECTS = ["location", "history", "navigator"];
+
+/**
+ * Storage, which is installed where the host has none *or has one that does
+ * not work*.
+ *
+ * Node defines `globalThis.localStorage` and leaves it empty unless the
+ * process was started with `--localstorage-file`:
+ *
+ * ```text
+ * typeof globalThis.localStorage        // "object"
+ * globalThis.localStorage.setItem       // undefined
+ * ```
+ *
+ * So "the host already has one" is the wrong question, and asking it left
+ * every `useStorage` test writing into an object with no `setItem` —
+ * `globalThis.localStorage.setItem is not a function`, from a line that had
+ * nothing to do with the hook under test. The question is whether it works.
+ */
+const STORAGE = ["localStorage", "sessionStorage"];
+
+/**
+ * Whether a value is a Storage a test can actually use.
+ *
+ * The four methods, not one: a half-implemented shim that has `getItem` and
+ * no `removeItem` fails later and further away than one that is absent.
+ */
+function isUsableStorage(value: mixed): boolean {
+  if (value == null || typeof value !== "object") {
+    return false;
+  }
+  const storage: { [string]: mixed } = value as any;
+  return (
+    typeof storage.getItem === "function" &&
+    typeof storage.setItem === "function" &&
+    typeof storage.removeItem === "function" &&
+    typeof storage.clear === "function"
+  );
+}
 
 let installed: mixed = null;
 
@@ -72,6 +110,7 @@ let installed: mixed = null;
  * root already mounted in the old one.
  */
 export function installDom(): mixed {
+  installActEnvironment();
   if (installed != null) {
     return installed;
   }
@@ -103,6 +142,15 @@ export function installDom(): mixed {
       define(name, value);
     }
   }
+  for (const name of STORAGE) {
+    if (isUsableStorage(globalThis[name])) {
+      continue;
+    }
+    const value = (win as any)[name];
+    if (isUsableStorage(value)) {
+      define(name, value);
+    }
+  }
 
   // React reads these to decide it is in a browser and to pick its event
   // system, and they must be the objects the elements belong to.
@@ -113,6 +161,46 @@ export function installDom(): mixed {
   return installed;
 }
 
+/**
+ * Tell React that this process is running tests.
+ *
+ * React cannot tell a test from a production render, so `act` warns "The
+ * current testing environment is not configured to support act(...)" unless
+ * the harness says so. Every render in this package goes through `act`, so
+ * without this every component test printed the warning — 73 times in one
+ * file of this repository — and a warning worth reading was lost among them.
+ *
+ * Separate from the document because the two are independent: a project
+ * already running in a browser has a DOM and still has to say it is testing.
+ */
+export function installActEnvironment(): void {
+  if (declared) {
+    return;
+  }
+  declared = true;
+  define("IS_REACT_ACT_ENVIRONMENT", true);
+}
+
+/**
+ * Turn the act environment on or off.
+ *
+ * `waitFor` stands it down for the length of a wait; see the reason there.
+ */
+export function setActEnvironment(active: boolean): void {
+  declared = true;
+  define("IS_REACT_ACT_ENVIRONMENT", active);
+}
+
+/**
+ * Whether the flag has been installed, tracked separately from its value.
+ *
+ * Every query calls `installDom`, which installs the act environment, and
+ * every query inside a `waitFor` therefore ran while `waitFor` had stood the
+ * environment down. Reading the flag to decide whether to set it turned it
+ * back on at the first assertion, so only the first poll of a wait was quiet.
+ */
+let declared = false;
+
 /**
  * Assign a global, even where the host declared it as a getter.
  *

package/internal/render.js

@@ -16,7 +16,7 @@ import { createRequire } from "node:module";
 import type * as React from "@uniflowed/react";
 import { act } from "@uniflowed/react";
 
-import { installDom } from "./dom.js";
+import { installActEnvironment, installDom, setActEnvironment } from "./dom.js";
 
 /** What `render` hands back. */
 export type RenderResult = {|
@@ -131,13 +131,38 @@ function requireClient(): { createRoot: (Element) => any } {
  * and this is how.
  */
 export function actively<T>(body: () => T): T {
-  let result: T;
-  act(() => {
+  // A test that acts without having rendered — a timer firing in a hook test
+  // — reaches `act` without going through `render`, and `act` still has to
+  // know it is being called by a test.
+  installActEnvironment();
+  let result: mixed;
+  const scope: mixed = act(() => {
     result = body();
+    // Handed back so React keeps the scope open until an async body settles.
+    // Without this the scope closed on the first tick and every update the
+    // body was still waiting for landed outside it, which React reports as
+    // "an update was not wrapped in act(...)".
+    return result;
   });
+  if (isThenable(result) && isThenable(scope)) {
+    // `Promise.resolve`, not `scope.then(…)`: `act` hands back a bare thenable
+    // — an object with a `then` and nothing else — whose `then` returns
+    // `undefined` rather than a promise. Chaining off it directly produced an
+    // `undefined` that `await` resolved immediately, so the caller carried on
+    // while the scope was still open: the body's timers had not fired, and
+    // every later `act` nested inside the scope that was never closed and
+    // flushed nothing. `render` after one of those returned an empty
+    // container.
+    return Promise.resolve(scope).then(() => result) as any;
+  }
   return result as any;
 }
 
+/** Whether `value` is something to await. */
+function isThenable(value: mixed): boolean {
+  return value != null && typeof value === "object" && typeof (value as any).then === "function";
+}
+
 /**
  * Wait until `body` stops throwing, or give up.
  *
@@ -149,8 +174,44 @@ export async function waitFor<T>(
   body: () => T | Promise<T>,
   options?: {| readonly timeout?: number, readonly interval?: number |},
 ): Promise<T> {
+  installActEnvironment();
   const timeout = options?.timeout ?? 1000;
   const interval = options?.interval ?? 20;
+
+  // React is told this is not an act environment for as long as the wait
+  // lasts, and told again afterwards.
+  //
+  // The update a test waits for arrives between two polls, and React reports
+  // it as "an update to X inside a test was not wrapped in act(...)" —
+  // correctly, since nothing was there to flush it. The fix cannot be to put
+  // the polling loop inside an `act` scope: `act` holds updates back until
+  // the scope closes, so the loop would poll a tree that cannot change and
+  // every `waitFor` would run to its timeout.
+  //
+  // So the scope is stood down instead. The warning exists to catch an update
+  // a test did not know it was causing; a test that wrote `waitFor` knows.
+  // Counted rather than saved and restored, because waits nest: every
+  // `findBy…` is a `waitFor`, and a test may put one inside another. The
+  // outermost wait stands the environment down and the outermost restores it.
+  waits += 1;
+  if (waits === 1) {
+    setActEnvironment(false);
+  }
+  try {
+    return await poll(body, timeout, interval);
+  } finally {
+    waits -= 1;
+    if (waits === 0) {
+      setActEnvironment(true);
+    }
+  }
+}
+
+/** How many waits are in progress. */
+let waits = 0;
+
+/** Call `body` until it stops throwing, or give up after `timeout`. */
+async function poll<T>(body: () => T | Promise<T>, timeout: number, interval: number): Promise<T> {
   const deadline = Date.now() + timeout;
   let lastError: mixed = null;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/react-testing",
-  "version": "0.0.0-alpha.2",
+  "version": "0.0.0-alpha.4",
   "description": "React Testing Library over a real DOM, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -18,8 +18,8 @@
     "internal"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.2",
-    "@uniflowed/react": "0.0.0-alpha.2",
+    "@uniflowed/core": "0.0.0-alpha.4",
+    "@uniflowed/react": "0.0.0-alpha.4",
     "happy-dom": "^20.13.2"
   },
   "peerDependencies": {