Add ReactNativetester#getRenderedOutput() API (#47970)

Summary:
Pull Request resolved: #47970

Changelog: [Internal]

Reviewed By: rubennorte

Differential Revision: D65617491

fbshipit-source-id: 49369b694a81b7dfb541c75d9e24b62fc141d980

Author: andrewdacenko

jest/integration/runtime/setup.js

@@ -10,6 +10,7 @@
  */
 
 import deepEqual from 'deep-equal';
+import {diff} from 'jest-diff';
 import nullthrows from 'nullthrows';
 
 export type TestCaseResult = {
@@ -227,7 +228,13 @@ class Expect {
     const pass = deepEqual(this.#received, expected, {strict: true});
     if (!this.#isExpectedResult(pass)) {
       throw new ErrorWithCustomBlame(
-        `Expected${this.#maybeNotLabel()} to equal ${String(expected)} but received ${String(this.#received)}.`,
+        `Expected${this.#maybeNotLabel()} to equal:\n${
+          diff(expected, this.#received, {
+            contextLines: 1,
+            expand: false,
+            omitAnnotationLines: true,
+          }) ?? 'Failed to compare outputs'
+        }`,
       ).blameToPreviousFrame();
     }
   }

packages/react-native/src/private/__tests__/FantomRenderedOutput.js

@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+// $FlowExpectedError[untyped-import]
+import micromatch from 'micromatch';
+import * as React from 'react';
+
+export type RenderOutputConfig = {
+  ...FantomRenderedOutputConfig,
+  includeRoot?: boolean,
+  includeLayoutMetrics?: boolean,
+};
+
+// match RenderFormatOptions.h
+type NativeRenderFormatOptions = {
+  includeRoot: boolean,
+  includeLayoutMetrics: boolean,
+};
+
+type FantomJsonObject = {
+  type: string,
+  props: {[key: string]: string},
+  children: $ReadOnlyArray<FantomJsonObject | string>,
+};
+
+type FantomJson = FantomJsonObject | $ReadOnlyArray<FantomJsonObject>;
+
+type FantomRenderedOutputConfig = {
+  // micromatch pattern to match prop names
+  // see usage examples in https://github.com/micromatch/micromatch#examples
+  props?: $ReadOnlyArray<string>,
+};
+
+class FantomRenderedOutput {
+  #json: FantomJson;
+
+  constructor(json: FantomJson, config: FantomRenderedOutputConfig) {
+    this.#json = this.#filterJson(json, config);
+  }
+
+  toJSON(): FantomJson {
+    return Array.isArray(this.#json) ? [...this.#json] : {...this.#json};
+  }
+
+  toJSX(): React.Node {
+    return convertRawJsonToJSX(this.#json);
+  }
+
+  #filterJson(
+    json: FantomJson,
+    config: FantomRenderedOutputConfig,
+  ): FantomJson {
+    if (Array.isArray(json)) {
+      return json.map(child => this.#filterJsonObject(child, config));
+    } else {
+      return this.#filterJsonObject(json, config);
+    }
+  }
+
+  #filterJsonObject(
+    json: FantomJsonObject,
+    config: FantomRenderedOutputConfig,
+  ): FantomJsonObject {
+    const root: FantomJsonObject = {
+      type: json.type,
+      props: this.#filterProps(json.props, config),
+      children: [],
+    };
+
+    if (Array.isArray(json.children)) {
+      root.children = json.children.map(child =>
+        typeof child === 'object'
+          ? this.#filterJsonObject(child, config)
+          : child,
+      );
+    } else {
+      root.children = json.children;
+    }
+
+    return root;
+  }
+
+  #filterProps(
+    props: FantomJsonObject['props'],
+    config: FantomRenderedOutputConfig,
+  ): FantomJsonObject['props'] {
+    if (config.props == null) {
+      return {...props};
+    }
+
+    return micromatch(Object.keys(props), config.props ?? []).reduce(
+      (acc, name) => {
+        acc[name] = props[name];
+        return acc;
+      },
+      {},
+    );
+  }
+}
+
+export type {FantomRenderedOutput};
+
+export default function getFantomRenderedOutput(
+  surfaceId: number,
+  config: RenderOutputConfig,
+): FantomRenderedOutput {
+  const {
+    includeRoot = false,
+    includeLayoutMetrics = false,
+    ...fantomConfig
+  } = config;
+  const nativeConfig: NativeRenderFormatOptions = {
+    includeRoot,
+    includeLayoutMetrics,
+  };
+
+  return new FantomRenderedOutput(
+    JSON.parse(
+      global.$$JSTesterModuleName$$.getRenderedOutput(surfaceId, nativeConfig),
+    ),
+    fantomConfig,
+  );
+}
+
+function convertRawJsonToJSX(
+  actualJSON: FantomJsonObject | $ReadOnlyArray<FantomJsonObject>,
+): React.Node {
+  let actualJSX;
+  if (actualJSON === null || typeof actualJSON === 'string') {
+    actualJSX = actualJSON;
+  } else if (Array.isArray(actualJSON)) {
+    if (actualJSON.length === 0) {
+      actualJSX = null;
+    } else if (actualJSON.length === 1) {
+      actualJSX = jsonChildToJSXChild(actualJSON[0]);
+    } else {
+      const actualJSXChildren = jsonChildrenToJSXChildren(actualJSON);
+      if (actualJSXChildren === null || typeof actualJSXChildren === 'string') {
+        actualJSX = actualJSXChildren;
+      } else {
+        actualJSX = <>{actualJSXChildren}</>;
+      }
+    }
+  } else {
+    actualJSX = jsonChildToJSXChild(actualJSON);
+  }
+
+  return actualJSX;
+}
+
+function createJSXElementForTestComparison(
+  type: string,
+  props: mixed,
+): React.Node {
+  const Tag = type;
+  return <Tag {...props} />;
+}
+
+function rnTypeToTestType(type: string): string {
+  return `rn-${type.substring(0, 1).toLowerCase() + type.substring(1)}`;
+}
+
+function jsonChildToJSXChild(jsonChild: FantomJsonObject | string): React.Node {
+  if (typeof jsonChild === 'string') {
+    return jsonChild;
+  } else {
+    const jsxChildren = jsonChildrenToJSXChildren(jsonChild.children);
+    const type = rnTypeToTestType(jsonChild.type);
+    return createJSXElementForTestComparison(
+      type,
+      jsxChildren == null
+        ? jsonChild.props
+        : {...jsonChild.props, children: jsxChildren},
+    );
+  }
+}
+
+function jsonChildrenToJSXChildren(jsonChildren: FantomJsonObject['children']) {
+  if (jsonChildren.length === 1) {
+    return jsonChildToJSXChild(jsonChildren[0]);
+  } else if (jsonChildren.length > 1) {
+    const jsxChildren = [];
+    let allJSXChildrenAreStrings = true;
+    let jsxChildrenString = '';
+    for (let i = 0; i < jsonChildren.length; i++) {
+      const jsxChild = jsonChildToJSXChild(jsonChildren[i]);
+      jsxChildren.push(jsxChild);
+      if (allJSXChildrenAreStrings) {
+        if (typeof jsxChild === 'string') {
+          jsxChildrenString += jsxChild;
+        } else if (jsxChild !== null) {
+          allJSXChildrenAreStrings = false;
+        }
+      }
+    }
+    return allJSXChildrenAreStrings ? jsxChildrenString : jsxChildren;
+  }
+
+  return null;
+}

packages/react-native/src/private/__tests__/ReactNativeTester.js

@@ -8,9 +8,14 @@
  * @format
  */
 
+import type {
+  FantomRenderedOutput,
+  RenderOutputConfig,
+} from './FantomRenderedOutput';
 import type {MixedElement} from 'react';
 
 import ReactFabric from '../../../Libraries/Renderer/shims/ReactFabric';
+import getFantomRenderedOutput from './FantomRenderedOutput';
 
 let globalSurfaceIdCounter = 1;
 
@@ -48,6 +53,10 @@ class Root {
     global.$$JSTesterModuleName$$.flushMessageQueue();
   }
 
+  getRenderedOutput(config: RenderOutputConfig = {}): FantomRenderedOutput {
+    return getFantomRenderedOutput(this.#surfaceId, config);
+  }
+
   // TODO: add an API to check if all surfaces were deallocated when tests are finished.
 }