universal-test-renderer 0.5.0 → 0.7.0

package/README.md

@@ -1,16 +1,15 @@
 # Universal Test Renderer for React
 
-## The problem
+A lightweight, JavaScript-only replacement for the deprecated React Test Renderer.
 
-Many React renderers require additional setup in order to work properly. For example, React Native requires a native code to run setup, and React DOM requires a DOM environment. While it's feasible to run a React DOM in simulated JS DOM environment, it is not possible for React Native.
+## Why Use It?
 
-Traditionally, in such case developers used React Test Renderer, but it has been deprecated with React 18.3.1, in it will be removed in the future.
-
-## The solution
-
-This is a universal test renderer that can be used to test React components in pure JavaScript environments like Jest or Vitest. It's build on top of React Reconciler and renders React components on host component level, exposing the resulting host component tree for various types of inspection: tree structure, props checking, etc.
-
-This renderer is created to be used as replacement for React Test Renderer.
+- **Pure JavaScript Testing** - Test React components in Jest or Vitest without browser or native dependencies
+- **Universal** - Can be used to simulate React Native or any other React renderer
+- **React 19 Ready** - Modern alternative as React Test Renderer is now deprecated
+- **Lightweight** - Minimal dependencies and small bundle size
+- **Type-safe** - Written in TypeScript with full type definitions
+- **Flexible Configuration** - Customizable reconciler options for different use cases
 
 ## Installation
 
@@ -18,53 +17,28 @@ This renderer is created to be used as replacement for React Test Renderer.
 npm install -D universal-test-renderer
 ```
 
-Note: this package is now compatible with React 18.3. In the near future I will add React 19 support, as well.
-
-## Usage
+## Basic Usage
 
 ```tsx
 import { act } from "react";
 import { createRoot } from "universal-test-renderer";
 
-test("basic renderer usage", () => {
+test("example", () => {
   const renderer = createRoot();
   act(() => {
     renderer.render(<div>Hello!</div>);
   });
 
-  expect(renderer.root?.toJSON()).toMatchInlineSnapshot(`
-<div>
-  Hello!
-</div>
-`);
-});
-```
-
-## React Native support
-
-This packages includes a version of renderer configured to be compatible with React Native.
-
-```tsx
-import { act } from "react";
-import { Text } from "react-native";
-import { createRoot } from "universal-test-renderer/react-native";
-
-test("basic renderer usage", () => {
-  const renderer = createRoot();
-  act(() => {
-    renderer.render(<Text>Hello!</Text>);
-  });
-
-  expect(renderer.root?.toJSON()).toMatchInlineSnapshot(`
-<Text>
-  Hello!
-</Text>
-`);
+  expect(renderer.root).toMatchInlineSnapshot(`
+    <div>
+      Hello!
+    </div>
+  `);
 });
 ```
 
-## Differences from React Test Renderer
+## Key Differences from React Test Renderer
 
-- This renderer operates on host components level, it does not expose composite components unlike React Test Renderer, which exposed both host components and composite components.
-- This renderer offers more flexible renderer setup, allowing for passing various options to the underlying React Reconciler, like concurrent mode, specifying allowed text components, etc.
-- This renderer does not re-export `act` function, you should use one provided by `react` package instead.
+- Works at host component level only (no composite components)
+- More flexible reconciler configuration options
+- Uses `act` from the React package directly

package/dist/index.cjs

@@ -57,12 +57,124 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  CONTAINER_TYPE: () => CONTAINER_TYPE,
+var index_exports = {};
+__export(index_exports, {
   createRoot: () => createRoot
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
+
+// src/renderer.ts
+var import_constants2 = require("react-reconciler/constants");
+
+// src/find-all.ts
+function findAll(root, predicate, options) {
+  const results = [];
+  const matchingDescendants = [];
+  root.children.forEach((child) => {
+    if (typeof child === "string") {
+      return;
+    }
+    matchingDescendants.push(...findAll(child, predicate, options));
+  });
+  if (
+    // When matchDeepestOnly = true: add current element only if no descendants match
+    (!(options == null ? void 0 : options.matchDeepestOnly) || matchingDescendants.length === 0) && predicate(root)
+  ) {
+    results.push(root);
+  }
+  results.push(...matchingDescendants);
+  return results;
+}
+
+// src/render-to-json.ts
+function renderToJson(instance) {
+  if (instance.isHidden) {
+    return null;
+  }
+  switch (instance.tag) {
+    case "TEXT":
+      return instance.text;
+    case "INSTANCE": {
+      const _a = instance.props, { children } = _a, props = __objRest(_a, ["children"]);
+      let renderedChildren = null;
+      if (instance.children.length) {
+        for (let i = 0; i < instance.children.length; i++) {
+          const renderedChild = renderToJson(instance.children[i]);
+          if (renderedChild !== null) {
+            if (renderedChildren === null) {
+              renderedChildren = [renderedChild];
+            } else {
+              renderedChildren.push(renderedChild);
+            }
+          }
+        }
+      }
+      const result = {
+        type: instance.type,
+        props,
+        children: renderedChildren,
+        $$typeof: /* @__PURE__ */ Symbol.for("react.test.json")
+      };
+      Object.defineProperty(result, "$$typeof", {
+        value: /* @__PURE__ */ Symbol.for("react.test.json")
+      });
+      return result;
+    }
+  }
+}
+
+// src/host-element.ts
+var instanceMap = /* @__PURE__ */ new WeakMap();
+var HostElement = class _HostElement {
+  constructor(instance) {
+    this.instance = instance;
+  }
+  get type() {
+    return this.instance.type;
+  }
+  get props() {
+    const _a = this.instance.props, { children } = _a, restProps = __objRest(_a, ["children"]);
+    return restProps;
+  }
+  get children() {
+    const result = this.instance.children.filter((child) => !child.isHidden).map((child) => getHostNodeForInstance(child));
+    return result;
+  }
+  get parent() {
+    const parentInstance = this.instance.parent;
+    if (parentInstance == null || parentInstance.tag === "CONTAINER") {
+      return null;
+    }
+    return _HostElement.fromInstance(parentInstance);
+  }
+  get unstable_fiber() {
+    return this.instance.unstable_fiber;
+  }
+  get $$typeof() {
+    return /* @__PURE__ */ Symbol.for("react.test.json");
+  }
+  toJSON() {
+    return renderToJson(this.instance);
+  }
+  /** @internal */
+  static fromInstance(instance) {
+    const hostElement = instanceMap.get(instance);
+    if (hostElement) {
+      return hostElement;
+    }
+    const result = new _HostElement(instance);
+    instanceMap.set(instance, result);
+    return result;
+  }
+};
+function getHostNodeForInstance(instance) {
+  switch (instance.tag) {
+    case "TEXT":
+      return instance.text;
+    case "INSTANCE":
+      return HostElement.fromInstance(instance);
+  }
+}
 
 // src/reconciler.ts
 var import_react_reconciler = __toESM(require("react-reconciler"), 1);
@@ -157,7 +269,7 @@ var hostConfig = {
       children: [],
       parent: null,
       rootContainer,
-      internalHandle
+      unstable_fiber: internalHandle
     };
   },
   /**
@@ -275,9 +387,7 @@ var hostConfig = {
    */
   getChildHostContext(parentHostContext, type) {
     var _a;
-    const isInsideText = Boolean(
-      (_a = parentHostContext.config.textComponents) == null ? void 0 : _a.includes(type)
-    );
+    const isInsideText = Boolean((_a = parentHostContext.config.textComponents) == null ? void 0 : _a.includes(type));
     return __spreadProps(__spreadValues({}, parentHostContext), { type, isInsideText });
   },
   /**
@@ -382,7 +492,7 @@ var hostConfig = {
   getInstanceFromNode(node) {
     const instance = nodeToInstanceMap.get(node);
     if (instance !== void 0) {
-      return instance.internalHandle;
+      return instance.unstable_fiber;
     }
     return null;
   },
@@ -511,7 +621,7 @@ var hostConfig = {
   commitUpdate(instance, type, _prevProps, nextProps, internalHandle) {
     instance.type = type;
     instance.props = nextProps;
-    instance.internalHandle = internalHandle;
+    instance.unstable_fiber = internalHandle;
   },
   /**
    * #### `hideInstance(instance)`
@@ -645,139 +755,7 @@ function removeChild(parentInstance, child) {
   child.parent = null;
 }
 
-// src/constants.ts
-var CONTAINER_TYPE = "CONTAINER";
-
-// src/render-to-json.ts
-function renderToJson(instance) {
-  if (`isHidden` in instance && instance.isHidden) {
-    return null;
-  }
-  switch (instance.tag) {
-    case "TEXT":
-      return instance.text;
-    case "INSTANCE": {
-      const _a = instance.props, { children } = _a, props = __objRest(_a, ["children"]);
-      let renderedChildren = null;
-      if (instance.children.length) {
-        for (let i = 0; i < instance.children.length; i++) {
-          const renderedChild = renderToJson(instance.children[i]);
-          if (renderedChild !== null) {
-            if (renderedChildren === null) {
-              renderedChildren = [renderedChild];
-            } else {
-              renderedChildren.push(renderedChild);
-            }
-          }
-        }
-      }
-      const result = {
-        type: instance.type,
-        props,
-        children: renderedChildren,
-        $$typeof: Symbol.for("react.test.json")
-      };
-      Object.defineProperty(result, "$$typeof", {
-        value: Symbol.for("react.test.json")
-      });
-      return result;
-    }
-    case "CONTAINER": {
-      let renderedChildren = null;
-      if (instance.children.length) {
-        for (let i = 0; i < instance.children.length; i++) {
-          const renderedChild = renderToJson(instance.children[i]);
-          if (renderedChild !== null) {
-            if (renderedChildren === null) {
-              renderedChildren = [renderedChild];
-            } else {
-              renderedChildren.push(renderedChild);
-            }
-          }
-        }
-      }
-      const result = {
-        type: CONTAINER_TYPE,
-        props: {},
-        children: renderedChildren,
-        $$typeof: Symbol.for("react.test.json")
-      };
-      Object.defineProperty(result, "$$typeof", {
-        value: Symbol.for("react.test.json")
-      });
-      return result;
-    }
-  }
-}
-
-// src/host-element.ts
-var instanceToHostElementMap = /* @__PURE__ */ new WeakMap();
-var HostElement = class _HostElement {
-  constructor(instance) {
-    this.instance = instance;
-  }
-  get type() {
-    return this.instance.tag === "INSTANCE" ? this.instance.type : CONTAINER_TYPE;
-  }
-  get props() {
-    if (this.instance.tag === "CONTAINER") {
-      return {};
-    }
-    const _a = this.instance.props, { children } = _a, restProps = __objRest(_a, ["children"]);
-    return restProps;
-  }
-  get children() {
-    const result = this.instance.children.filter((child) => !child.isHidden).map((child) => _HostElement.fromInstance(child));
-    return result;
-  }
-  get parent() {
-    const parentInstance = this.instance.parent;
-    if (parentInstance == null) {
-      return null;
-    }
-    switch (parentInstance.tag) {
-      case "INSTANCE":
-        return _HostElement.fromInstance(parentInstance);
-      case "CONTAINER":
-        return _HostElement.fromContainer(parentInstance);
-    }
-  }
-  get $$typeof() {
-    return Symbol.for("react.test.json");
-  }
-  toJSON() {
-    return renderToJson(this.instance);
-  }
-  /** @internal */
-  static fromContainer(container) {
-    const hostElement = instanceToHostElementMap.get(container);
-    if (hostElement) {
-      return hostElement;
-    }
-    const result = new _HostElement(container);
-    instanceToHostElementMap.set(container, result);
-    return result;
-  }
-  /** @internal */
-  static fromInstance(instance) {
-    switch (instance.tag) {
-      case "TEXT":
-        return instance.text;
-      case "INSTANCE": {
-        const hostElement = instanceToHostElementMap.get(instance);
-        if (hostElement) {
-          return hostElement;
-        }
-        const result = new _HostElement(instance);
-        instanceToHostElementMap.set(instance, result);
-        return result;
-      }
-    }
-  }
-};
-
 // src/renderer.ts
-var import_constants4 = require("react-reconciler/constants");
 function createRoot(options) {
   var _a;
   let container = {
@@ -786,12 +764,12 @@ function createRoot(options) {
     parent: null,
     config: {
       textComponents: options == null ? void 0 : options.textComponents,
-      createNodeMock: (_a = options == null ? void 0 : options.createNodeMock) != null ? _a : () => ({})
+      createNodeMock: (_a = options == null ? void 0 : options.createNodeMock) != null ? _a : (() => ({}))
     }
   };
   let containerFiber = TestReconciler.createContainer(
     container,
-    import_constants4.ConcurrentRoot,
+    import_constants2.ConcurrentRoot,
     null,
     // hydration callbacks
     false,
@@ -824,33 +802,33 @@ function createRoot(options) {
     container = null;
     containerFiber = null;
   };
+  const getRoot = () => {
+    if (containerFiber == null || container == null) {
+      throw new Error("Can't access .root on unmounted test renderer");
+    }
+    if (container.children.length === 0) {
+      return null;
+    }
+    const firstChild = container.children[0];
+    if (firstChild.tag === "TEXT") {
+      throw new Error("Cannot render text as root element");
+    }
+    return HostElement.fromInstance(firstChild);
+  };
   return {
     render,
     unmount,
     get root() {
-      if (containerFiber == null || container == null) {
-        throw new Error("Can't access .root on unmounted test renderer");
-      }
-      if (container.children.length === 0) {
-        return null;
-      }
-      const root = HostElement.fromInstance(container.children[0]);
-      if (typeof root === "string") {
-        throw new Error("Cannot render string as root element");
-      }
-      return root;
+      return getRoot();
     },
-    get container() {
-      if (containerFiber == null || container == null) {
-        throw new Error("Can't access .container on unmounted test renderer");
-      }
-      return HostElement.fromContainer(container);
+    findAll: (predicate, options2) => {
+      const root = getRoot();
+      return root != null ? findAll(root, predicate, options2) : [];
     }
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  CONTAINER_TYPE,
   createRoot
 });
 //# sourceMappingURL=index.cjs.map