feat: dynamic HostElement prop calculation

Author: mdjastrzebski

src/queries/__tests__/test-id.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Text, TextInput, View } from 'react-native';
-import { render, screen } from '../..';
+import { configure, render, screen } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -24,6 +24,10 @@ const Banana = () => (
 
 const MyComponent = (_props: { testID?: string }) => <Text>My Component</Text>;
 
+beforeEach(() => {
+  configure({ renderer: 'internal' });
+});
+
 test('getByTestId returns only native elements', () => {
   render(
     <View>

src/renderer/host-element.ts

@@ -10,14 +10,29 @@ type FindOptions = {
 const instanceToHostElementMap = new WeakMap<Container | Instance, HostElement>();
 
 export class HostElement {
-  public type: string;
-  public props: HostElementProps;
-  public children: HostNode[];
-
-  constructor(type: string, props: HostElementProps, children: HostNode[]) {
-    this.type = type;
-    this.props = props;
-    this.children = children;
+  private instance: Instance | Container;
+
+  constructor(instance: Instance | Container) {
+    this.instance = instance;
+  }
+
+  get type(): string {
+    return 'type' in this.instance ? this.instance.type : 'ROOT';
+  }
+
+  get props(): HostElementProps {
+    return 'props' in this.instance ? this.instance.props : {};
+  }
+
+  get children(): HostNode[] {
+    console.log('AAAA', this.instance.children);
+    const result = this.instance.children.map((child) => HostElement.fromInstance(child));
+    console.log('BBBB', result);
+    return result;
+  }
+
+  get $$typeof(): Symbol {
+    return Symbol.for('react.test.json');
   }
 
   static fromContainer(container: Container): HostElement {
@@ -26,12 +41,7 @@ export class HostElement {
       return hostElement;
     }
 
-    const result = new HostElement(
-      'ROOT',
-      {},
-      container.children.map((child) => HostElement.fromInstance(child)),
-    );
-
+    const result = new HostElement(container);
     instanceToHostElementMap.set(container, result);
     return result;
   }
@@ -47,19 +57,14 @@ export class HostElement {
           return hostElement;
         }
 
-        const result = new HostElement(
-          instance.type,
-          instance.props,
-          instance.children.map((child) => HostElement.fromInstance(child)),
-        );
-
+        const result = new HostElement(instance);
         instanceToHostElementMap.set(instance, result);
         return result;
       }
 
       default:
         // @ts-expect-error
-        throw new Error(`Unexpected node type in toJSON: ${instance.tag}`);
+        throw new Error(`Unexpected node type in HostElement.fromInstance: ${instance.tag}`);
     }
   }
 

src/renderer/render-to-json.ts

@@ -1,4 +1,4 @@
-import { Instance, TextInstance } from './reconciler';
+import { Container, Instance, TextInstance } from './reconciler';
 
 export type JsonNode = JsonInstance | string;
 
@@ -9,8 +9,8 @@ export type JsonInstance = {
   $$typeof: Symbol;
 };
 
-export function renderToJson(instance: Instance | TextInstance): JsonNode | null {
-  if (instance.isHidden) {
+export function renderToJson(instance: Container | Instance | TextInstance): JsonNode | null {
+  if (`isHidden` in instance && instance.isHidden) {
     // Omit timed out children from output entirely. This seems like the least
     // surprising behavior. We could perhaps add a separate API that includes
     // them, if it turns out people need it.
@@ -54,6 +54,34 @@ export function renderToJson(instance: Instance | TextInstance): JsonNode | null
       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: 'ROOT',
+        props: {},
+        children: renderedChildren,
+        $$typeof: Symbol.for('react.test.json'),
+      };
+      // This is needed for JEST to format snapshot as JSX.
+      Object.defineProperty(result, '$$typeof', {
+        value: Symbol.for('react.test.json'),
+      });
+      return result;
+    }
+
     default:
       // @ts-expect-error
       throw new Error(`Unexpected node type in toJSON: ${inst.tag}`);

src/renderer/renderer.test.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { View, Text } from 'react-native';
 import { render } from './renderer';
 
+function Passthrough({ children }: { children: React.ReactNode }) {
+  return children;
+}
+
 test('renders View', () => {
   render(<View />);
   expect(true).toBe(true);
@@ -12,10 +16,18 @@ test('renders Text', () => {
   expect(true).toBe(true);
 });
 
-test('throws when rendering string inside View', () => {
+test('throws when rendering string outside of Text', () => {
   expect(() => render(<View>Hello</View>)).toThrowErrorMatchingInlineSnapshot(
     `"Text string "Hello" must be rendered inside <Text> component"`,
   );
+
+  expect(() => render(<Passthrough>Hello</Passthrough>)).toThrowErrorMatchingInlineSnapshot(
+    `"Text string "Hello" must be rendered inside <Text> component"`,
+  );
+
+  expect(() => render(<>Hello</>)).toThrowErrorMatchingInlineSnapshot(
+    `"Text string "Hello" must be rendered inside <Text> component"`,
+  );
 });
 
 test('implements update()', () => {
@@ -57,20 +69,9 @@ test('implements unmount()', () => {
 test('implements get root()', () => {
   const result = render(<View testID="view" />);
   expect(result.root).toMatchInlineSnapshot(`
-    HostElement {
-      "children": [
-        HostElement {
-          "children": [],
-          "props": {
-            "children": undefined,
-            "testID": "view",
-          },
-          "type": "View",
-        },
-      ],
-      "props": {},
-      "type": "ROOT",
-    }
+    <View
+      testID="view"
+    />
   `);
 });
 

src/renderer/renderer.ts

@@ -1,12 +1,13 @@
 import { ReactElement } from 'react';
 import { Container, TestReconciler } from './reconciler';
 import { JsonNode, renderToJson } from './render-to-json';
-import { HostElement } from './host-element';
+import { HostElement, HostNode } from './host-element';
 
 export type RenderResult = {
   update: (element: ReactElement) => void;
   unmount: () => void;
-  root: HostElement | null;
+  container: HostElement | null;
+  root: HostNode | null;
   toJSON: () => JsonNode | JsonNode[] | null;
 };
 
@@ -17,7 +18,7 @@ export function render(element: ReactElement): RenderResult {
     createNodeMock: () => null,
   };
 
-  let rootFiber = TestReconciler.createContainer(
+  let containerFiber = TestReconciler.createContainer(
     container,
     0, // 0 = LegacyRoot, 1 = ConcurrentRoot
     null, // no hydration callback
@@ -31,7 +32,7 @@ export function render(element: ReactElement): RenderResult {
     null, // transitionCallbacks
   );
 
-  TestReconciler.updateContainer(element, rootFiber, null, () => {
+  TestReconciler.updateContainer(element, containerFiber, null, () => {
     // eslint-disable-next-line no-console
     //console.log('Rendered', container?.children);
   });
@@ -44,32 +45,32 @@ export function render(element: ReactElement): RenderResult {
   //     },
 
   const update = (element: ReactElement) => {
-    if (rootFiber == null || container == null) {
+    if (containerFiber == null || container == null) {
       return;
     }
 
-    TestReconciler.updateContainer(element, rootFiber, null, () => {
+    TestReconciler.updateContainer(element, containerFiber, null, () => {
       // eslint-disable-next-line no-console
       //console.log('Updated', container?.children);
     });
   };
 
   const unmount = () => {
-    if (rootFiber == null || container == null) {
+    if (containerFiber == null || container == null) {
       return;
     }
 
-    TestReconciler.updateContainer(null, rootFiber, null, () => {
+    TestReconciler.updateContainer(null, containerFiber, null, () => {
       // eslint-disable-next-line no-console
       //console.log('Unmounted', container?.children);
     });
 
     container = null;
-    rootFiber = null;
+    containerFiber = null;
   };
 
   const toJSON = () => {
-    if (rootFiber == null || container == null || container.children.length === 0) {
+    if (containerFiber == null || container == null || container.children.length === 0) {
       return null;
     }
 
@@ -109,13 +110,25 @@ export function render(element: ReactElement): RenderResult {
     update,
     unmount,
     toJSON,
-    get root(): HostElement {
-      if (rootFiber == null || container == null) {
-        throw new Error("Can't access .root on unmounted test renderer");
+    get container(): HostElement {
+      if (containerFiber == null || container == null) {
+        throw new Error("Can't access .container on unmounted test renderer");
       }
 
       return HostElement.fromContainer(container);
     },
+
+    get root(): HostNode {
+      if (containerFiber == null || container == null) {
+        throw new Error("Can't access .root on unmounted test renderer");
+      }
+
+      if (container.children.length === 0) {
+        throw new Error("Can't access .root on unmounted test renderer");
+      }
+
+      return HostElement.fromInstance(container.children[0]);
+    },
   };
 
   return result;