From c12194f7485f298fadc1e51cfffb93e63d61ad96 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Tue, 7 Feb 2023 07:59:44 -0500
Subject: [PATCH 1/9] [DevTools] improve error handling in extension (#26068)

## Summary

This is to fix some edge cases I recently observed when developing and
using the extension:
- When you reload the page, there's a chance that a port (most likely
the devtools one) is not properly unloaded. In this case, the React
DevTools will stop working unless you create a new tab.
- For unknown reasons, Chrome sometimes spins up two service worker
processes. In this case, an error will be thrown "duplicate ID when
registering content script" and sometimes interrupt the execution of the
rest of service worker.

This is an attempt to make the logic more robust
- Automatically shutting down the double pipe if the message fails, and
allowing the runtime to rebuild the double pipe.
- Log the error message so Chrome believes we've handled it and will not
interrupt the execution.

This also seems to be helpful in fixing #25806.
---
 .../src/background.js                         | 63 +++++++++++++------
 1 file changed, 44 insertions(+), 19 deletions(-)

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 70c2420b0df18..8ef96d2ec9b6f 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -12,22 +12,31 @@ if (!IS_FIREFOX) {
   // It's critical since it allows us to directly run scripts on the "main" world on the page
   // "document_start" allows it to run before the page's scripts
   // so the hook can be detected by react reconciler
-  chrome.scripting.registerContentScripts([
-    {
-      id: 'hook',
-      matches: ['<all_urls>'],
-      js: ['build/installHook.js'],
-      runAt: 'document_start',
-      world: chrome.scripting.ExecutionWorld.MAIN,
-    },
-    {
-      id: 'renderer',
-      matches: ['<all_urls>'],
-      js: ['build/renderer.js'],
-      runAt: 'document_start',
-      world: chrome.scripting.ExecutionWorld.MAIN,
+  chrome.scripting.registerContentScripts(
+    [
+      {
+        id: 'hook',
+        matches: ['<all_urls>'],
+        js: ['build/installHook.js'],
+        runAt: 'document_start',
+        world: chrome.scripting.ExecutionWorld.MAIN,
+      },
+      {
+        id: 'renderer',
+        matches: ['<all_urls>'],
+        js: ['build/renderer.js'],
+        runAt: 'document_start',
+        world: chrome.scripting.ExecutionWorld.MAIN,
+      },
+    ],
+    function() {
+      // When the content scripts are already registered, an error will be thrown.
+      // It happens when the service worker process is incorrectly duplicated.
+      if (chrome.runtime.lastError) {
+        console.error(chrome.runtime.lastError);
+      }
     },
-  ]);
+  );
 }
 
 chrome.runtime.onConnect.addListener(function (port) {
@@ -51,7 +60,7 @@ chrome.runtime.onConnect.addListener(function (port) {
   ports[tab][name] = port;
 
   if (ports[tab].devtools && ports[tab]['content-script']) {
-    doublePipe(ports[tab].devtools, ports[tab]['content-script']);
+    doublePipe(ports[tab].devtools, ports[tab]['content-script'], tab);
   }
 });
 
@@ -70,20 +79,36 @@ function installProxy(tabId: number) {
   }
 }
 
-function doublePipe(one, two) {
+function doublePipe(one, two, tabId) {
   one.onMessage.addListener(lOne);
   function lOne(message) {
-    two.postMessage(message);
+    try {
+      two.postMessage(message);
+    } catch (e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+      shutdown();
+    }
   }
   two.onMessage.addListener(lTwo);
   function lTwo(message) {
-    one.postMessage(message);
+    try {
+      one.postMessage(message);
+    } catch (e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+      shutdown();
+    }
   }
   function shutdown() {
     one.onMessage.removeListener(lOne);
     two.onMessage.removeListener(lTwo);
     one.disconnect();
     two.disconnect();
+    // clean up so that we can rebuild the double pipe if the page is reloaded
+    ports[tabId] = null;
   }
   one.onDisconnect.addListener(shutdown);
   two.onDisconnect.addListener(shutdown);

From 13f4ccfdba06b599a5db7c5a192024cbfa365edc Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 7 Feb 2023 17:57:43 +0100
Subject: [PATCH 2/9] Fix main (#26120)

## Summary

Prettier was bumped recently. So any branch not including that bump,
might bring in outdated formatting (e.g.
https://github.com/facebook/react/pull/26068)

## How did you test this change?

- [x] `yarn prettier-all`
---
 packages/react-devtools-extensions/src/background.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 8ef96d2ec9b6f..c2203146862b1 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -29,7 +29,7 @@ if (!IS_FIREFOX) {
         world: chrome.scripting.ExecutionWorld.MAIN,
       },
     ],
-    function() {
+    function () {
       // When the content scripts are already registered, an error will be thrown.
       // It happens when the service worker process is incorrectly duplicated.
       if (chrome.runtime.lastError) {

From f0cf832e1d0c8544c36aa8b310960885a11a847c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 7 Feb 2023 12:09:29 -0500
Subject: [PATCH 3/9] Update Flight Fixture to "use client" instead of
 .client.js (#26118)

This updates the Flight fixture to support the new ESM loaders in newer
versions of Node.js.

It also uses native fetch since react-fetch is gone now. (This part
requires Node 18 to run the fixture.)

I also updated everything to use the `"use client"` convention instead
of file name based convention.

The biggest hack here is that the Webpack plugin now just writes every
`.js` file in the manifest. This needs to be more scoped. In practice,
this new convention effectively requires you to traverse the server
graph first to find the actual used files. This is enough to at least
run our own fixture though.

I didn't update the "blocks" fixture.

More details in each commit message.
---
 fixtures/flight-browser/index.html            |   8 +-
 fixtures/flight/config/webpack.config.js      |   9 +-
 fixtures/flight/loader/index.js               |  30 ++-
 .../flight/server/{cli.server.js => cli.js}   |   2 +-
 .../server/{handler.server.js => handler.js}  |   4 +-
 fixtures/flight/server/package.json           |   2 +-
 fixtures/flight/src/{App.server.js => App.js} |  12 +-
 .../src/{Counter.client.js => Counter.js}     |   2 +
 fixtures/flight/src/Counter2.client.js        |   1 -
 fixtures/flight/src/Counter2.js               |   3 +
 .../src/{ShowMore.client.js => ShowMore.js}   |   2 +
 .../src/ReactFlightWebpackNodeLoader.js       | 233 +++++++++++-------
 .../src/ReactFlightWebpackNodeRegister.js     |  71 +++---
 .../src/ReactFlightWebpackPlugin.js           |   4 +-
 .../src/__tests__/utils/WebpackMock.js        |  16 +-
 scripts/rollup/bundles.js                     |  19 +-
 16 files changed, 247 insertions(+), 171 deletions(-)
 rename fixtures/flight/server/{cli.server.js => cli.js} (97%)
 rename fixtures/flight/server/{handler.server.js => handler.js} (89%)
 rename fixtures/flight/src/{App.server.js => App.js} (56%)
 rename fixtures/flight/src/{Counter.client.js => Counter.js} (94%)
 delete mode 100644 fixtures/flight/src/Counter2.client.js
 create mode 100644 fixtures/flight/src/Counter2.js
 rename fixtures/flight/src/{ShowMore.client.js => ShowMore.js} (95%)

diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
index 927a0556d5328..5b16a2809c7a1 100644
--- a/fixtures/flight-browser/index.html
+++ b/fixtures/flight-browser/index.html
@@ -20,7 +20,7 @@ <h1>Flight Example</h1>
     <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
     <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
-    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack.development.js"></script>
+    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let Suspense = React.Suspense;
@@ -60,7 +60,7 @@ <h1>Flight Example</h1>
         content: <HTML />,
       };
 
-      let stream = ReactServerDOMWriter.renderToReadableStream(model);
+      let stream = ReactServerDOMServer.renderToReadableStream(model);
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });
@@ -70,13 +70,13 @@ <h1>Flight Example</h1>
         let blob = await responseToDisplay.blob();
         let url = URL.createObjectURL(blob);
 
-        let data = ReactServerDOMReader.createFromFetch(
+        let data = ReactServerDOMClient.createFromFetch(
           fetch(url)
         );
         // The client also supports XHR streaming.
         // var xhr = new XMLHttpRequest();
         // xhr.open('GET', url);
-        // let data = ReactServerDOMReader.createFromXHR(xhr);
+        // let data = ReactServerDOMClient.createFromXHR(xhr);
         // xhr.send();
 
         renderResult(data);
diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
index e3af39826a1d0..1ed057352404d 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -752,7 +752,14 @@ module.exports = function (webpackEnv) {
       //     },
       //   }),
       // Fork Start
-      new ReactFlightWebpackPlugin({isServer: false}),
+      new ReactFlightWebpackPlugin({
+        isServer: false,
+        clientReferences: {
+          directory: './src',
+          recursive: true,
+          include: /\.(js|ts|jsx|tsx)$/,
+        },
+      }),
       // Fork End
     ].filter(Boolean),
     // Turn off performance processing because we utilize
diff --git a/fixtures/flight/loader/index.js b/fixtures/flight/loader/index.js
index 07e7eacd0104e..6a78bbde04f97 100644
--- a/fixtures/flight/loader/index.js
+++ b/fixtures/flight/loader/index.js
@@ -1,10 +1,11 @@
 import {
   resolve,
-  getSource,
+  load as reactLoad,
+  getSource as getSourceImpl,
   transformSource as reactTransformSource,
 } from 'react-server-dom-webpack/node-loader';
 
-export {resolve, getSource};
+export {resolve};
 
 import babel from '@babel/core';
 
@@ -17,6 +18,23 @@ const babelOptions = {
   ],
 };
 
+async function babelLoad(url, context, defaultLoad) {
+  const {format} = context;
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    const opt = Object.assign({filename: url}, babelOptions);
+    const {code} = await babel.transformAsync(result.source, opt);
+    return {source: code, format: 'module'};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
+
+export async function load(url, context, defaultLoad) {
+  return await reactLoad(url, context, (u, c) => {
+    return babelLoad(u, c, defaultLoad);
+  });
+}
+
 async function babelTransformSource(source, context, defaultTransformSource) {
   const {format} = context;
   if (format === 'module') {
@@ -27,8 +45,12 @@ async function babelTransformSource(source, context, defaultTransformSource) {
   return defaultTransformSource(source, context, defaultTransformSource);
 }
 
-export async function transformSource(source, context, defaultTransformSource) {
-  return reactTransformSource(source, context, (s, c) => {
+async function transformSourceImpl(source, context, defaultTransformSource) {
+  return await reactTransformSource(source, context, (s, c) => {
     return babelTransformSource(s, c, defaultTransformSource);
   });
 }
+
+export const transformSource =
+  process.version < 'v16' ? transformSourceImpl : undefined;
+export const getSource = process.version < 'v16' ? getSourceImpl : undefined;
diff --git a/fixtures/flight/server/cli.server.js b/fixtures/flight/server/cli.js
similarity index 97%
rename from fixtures/flight/server/cli.server.js
rename to fixtures/flight/server/cli.js
index 5d58f1d0358d9..0705d824dfc08 100644
--- a/fixtures/flight/server/cli.server.js
+++ b/fixtures/flight/server/cli.js
@@ -29,7 +29,7 @@ const app = express();
 
 // Application
 app.get('/', function (req, res) {
-  require('./handler.server.js')(req, res);
+  require('./handler.js')(req, res);
 });
 
 app.get('/todos', function (req, res) {
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.js
similarity index 89%
rename from fixtures/flight/server/handler.server.js
rename to fixtures/flight/server/handler.js
index 251833a52d15b..5b6f6b2abea8b 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.js
@@ -6,8 +6,8 @@ const {resolve} = require('path');
 const React = require('react');
 
 module.exports = function (req, res) {
-  // const m = require('../src/App.server.js');
-  import('../src/App.server.js').then(m => {
+  // const m = require('../src/App.js');
+  import('../src/App.js').then(m => {
     const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';
     readFile(
       resolve(__dirname, `../${dist}/react-client-manifest.json`),
diff --git a/fixtures/flight/server/package.json b/fixtures/flight/server/package.json
index 59055eee7d5bd..ad9c35437eda5 100644
--- a/fixtures/flight/server/package.json
+++ b/fixtures/flight/server/package.json
@@ -1,4 +1,4 @@
 {
   "type": "commonjs",
-  "main": "./cli.server.js"
+  "main": "./cli.js"
 }
diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.js
similarity index 56%
rename from fixtures/flight/src/App.server.js
rename to fixtures/flight/src/App.js
index 4a22318e9f18d..0f86f7edad3cd 100644
--- a/fixtures/flight/src/App.server.js
+++ b/fixtures/flight/src/App.js
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import {fetch} from 'react-fetch';
 
 import Container from './Container.js';
 
-import {Counter} from './Counter.client.js';
-import {Counter as Counter2} from './Counter2.client.js';
+import {Counter} from './Counter.js';
+import {Counter as Counter2} from './Counter2.js';
 
-import ShowMore from './ShowMore.client.js';
+import ShowMore from './ShowMore.js';
 
-export default function App() {
-  const todos = fetch('http://localhost:3001/todos').json();
+export default async function App() {
+  const res = await fetch('http://localhost:3001/todos');
+  const todos = await res.json();
   return (
     <Container>
       <h1>Hello, world</h1>
diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.js
similarity index 94%
rename from fixtures/flight/src/Counter.client.js
rename to fixtures/flight/src/Counter.js
index 676280f0542f6..8785424ca469f 100644
--- a/fixtures/flight/src/Counter.client.js
+++ b/fixtures/flight/src/Counter.js
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import Container from './Container.js';
diff --git a/fixtures/flight/src/Counter2.client.js b/fixtures/flight/src/Counter2.client.js
deleted file mode 100644
index 084f7bc5f071d..0000000000000
--- a/fixtures/flight/src/Counter2.client.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Counter.client.js';
diff --git a/fixtures/flight/src/Counter2.js b/fixtures/flight/src/Counter2.js
new file mode 100644
index 0000000000000..d6541beaf21b3
--- /dev/null
+++ b/fixtures/flight/src/Counter2.js
@@ -0,0 +1,3 @@
+'use client';
+
+export * from './Counter.js';
diff --git a/fixtures/flight/src/ShowMore.client.js b/fixtures/flight/src/ShowMore.js
similarity index 95%
rename from fixtures/flight/src/ShowMore.client.js
rename to fixtures/flight/src/ShowMore.js
index 86d01baa7984a..1bb330d3d68c8 100644
--- a/fixtures/flight/src/ShowMore.client.js
+++ b/fixtures/flight/src/ShowMore.js
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import Container from './Container.js';
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index bdbcb73a2a5e3..f6bd8a0bc74c7 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -41,6 +41,18 @@ type TransformSourceFunction = (
   TransformSourceFunction,
 ) => Promise<{source: Source}>;
 
+type LoadContext = {
+  conditions: Array<string>,
+  format: string | null | void,
+  importAssertions: Object,
+};
+
+type LoadFunction = (
+  string,
+  LoadContext,
+  LoadFunction,
+) => Promise<{format: string, shortCircuit?: boolean, source: Source}>;
+
 type Source = string | ArrayBuffer | Uint8Array;
 
 let warnedAboutConditionsFlag = false;
@@ -70,24 +82,7 @@ export async function resolve(
       );
     }
   }
-  const resolved = await defaultResolve(specifier, context, defaultResolve);
-  if (resolved.url.endsWith('.server.js')) {
-    const parentURL = context.parentURL;
-    if (parentURL && !parentURL.endsWith('.server.js')) {
-      let reason;
-      if (specifier.endsWith('.server.js')) {
-        reason = `"${specifier}"`;
-      } else {
-        reason = `"${specifier}" (which expands to "${resolved.url}")`;
-      }
-      throw new Error(
-        `Cannot import ${reason} from "${parentURL}". ` +
-          'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
-          'That way nobody accidentally sends these to the client by indirectly importing it.',
-      );
-    }
-  }
-  return resolved;
+  return await defaultResolve(specifier, context, defaultResolve);
 }
 
 export async function getSource(
@@ -148,38 +143,12 @@ function resolveClientImport(
   return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
 }
 
-async function loadClientImport(
-  url: string,
-  defaultTransformSource: TransformSourceFunction,
-): Promise<{source: Source}> {
-  if (stashedGetSource === null) {
-    throw new Error(
-      'Expected getSource to have been called before transformSource',
-    );
-  }
-  // TODO: Validate that this is another module by calling getFormat.
-  const {source} = await stashedGetSource(
-    url,
-    {format: 'module'},
-    stashedGetSource,
-  );
-  return defaultTransformSource(
-    source,
-    {format: 'module', url},
-    defaultTransformSource,
-  );
-}
-
 async function parseExportNamesInto(
-  transformedSource: string,
+  body: any,
   names: Array<string>,
   parentURL: string,
-  defaultTransformSource: TransformSourceFunction,
+  loader: LoadFunction,
 ): Promise<void> {
-  const {body} = acorn.parse(transformedSource, {
-    ecmaVersion: '2019',
-    sourceType: 'module',
-  });
   for (let i = 0; i < body.length; i++) {
     const node = body[i];
     switch (node.type) {
@@ -189,11 +158,19 @@ async function parseExportNamesInto(
           continue;
         } else {
           const {url} = await resolveClientImport(node.source.value, parentURL);
-          const {source} = await loadClientImport(url, defaultTransformSource);
+          const {source} = await loader(
+            url,
+            {format: 'module', conditions: [], importAssertions: {}},
+            loader,
+          );
           if (typeof source !== 'string') {
             throw new Error('Expected the transformed source to be a string.');
           }
-          parseExportNamesInto(source, names, url, defaultTransformSource);
+          const {body: childBody} = acorn.parse(source, {
+            ecmaVersion: '2019',
+            sourceType: 'module',
+          });
+          await parseExportNamesInto(childBody, names, url, loader);
           continue;
         }
       case 'ExportDefaultDeclaration':
@@ -221,6 +198,102 @@ async function parseExportNamesInto(
   }
 }
 
+async function transformClientModule(
+  source: string,
+  url: string,
+  loader: LoadFunction,
+): Promise<string> {
+  const names: Array<string> = [];
+
+  // Do a quick check for the exact string. If it doesn't exist, don't
+  // bother parsing.
+  if (source.indexOf('use client') === -1) {
+    return source;
+  }
+
+  const {body} = acorn.parse(source, {
+    ecmaVersion: '2019',
+    sourceType: 'module',
+  });
+
+  let useClient = false;
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    if (node.type !== 'ExpressionStatement' || !node.directive) {
+      break;
+    }
+    if (node.directive === 'use client') {
+      useClient = true;
+      break;
+    }
+  }
+
+  if (!useClient) {
+    return source;
+  }
+
+  await parseExportNamesInto(body, names, url, loader);
+
+  let newSrc =
+    "const CLIENT_REFERENCE = Symbol.for('react.client.reference');\n";
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i];
+    if (name === 'default') {
+      newSrc += 'export default ';
+      newSrc += 'Object.defineProperties(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call the default export of ${url} from the server` +
+            `but it's on the client. It's not possible to invoke a client function from ` +
+            `the server, it can only be rendered as a Component or passed to props of a` +
+            `Client Component.`,
+        ) +
+        ');';
+    } else {
+      newSrc += 'export const ' + name + ' = ';
+      newSrc += 'Object.defineProperties(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call ${name}() from the server but ${name} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        ) +
+        ');';
+    }
+    newSrc += '},{';
+    newSrc += 'name: { value: ' + JSON.stringify(name) + '},';
+    newSrc += '$$typeof: {value: CLIENT_REFERENCE},';
+    newSrc += 'filepath: {value: ' + JSON.stringify(url) + '}';
+    newSrc += '});\n';
+  }
+  return newSrc;
+}
+
+async function loadClientImport(
+  url: string,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  if (stashedGetSource === null) {
+    throw new Error(
+      'Expected getSource to have been called before transformSource',
+    );
+  }
+  // TODO: Validate that this is another module by calling getFormat.
+  const {source} = await stashedGetSource(
+    url,
+    {format: 'module'},
+    stashedGetSource,
+  );
+  const result = await defaultTransformSource(
+    source,
+    {format: 'module', url},
+    defaultTransformSource,
+  );
+  return {format: 'module', source: result.source};
+}
+
 export async function transformSource(
   source: Source,
   context: TransformSourceContext,
@@ -231,57 +304,35 @@ export async function transformSource(
     context,
     defaultTransformSource,
   );
-  if (context.format === 'module' && context.url.endsWith('.client.js')) {
+  if (context.format === 'module') {
     const transformedSource = transformed.source;
     if (typeof transformedSource !== 'string') {
       throw new Error('Expected source to have been transformed to a string.');
     }
-
-    const names: Array<string> = [];
-    await parseExportNamesInto(
+    const newSrc = await transformClientModule(
       transformedSource,
-      names,
       context.url,
-      defaultTransformSource,
+      (url: string, ctx: LoadContext, defaultLoad: LoadFunction) => {
+        return loadClientImport(url, defaultTransformSource);
+      },
     );
-
-    let newSrc =
-      "const CLIENT_REFERENCE = Symbol.for('react.client.reference');\n";
-    for (let i = 0; i < names.length; i++) {
-      const name = names[i];
-      if (name === 'default') {
-        newSrc += 'export default ';
-        newSrc += 'Object.defineProperties(function() {';
-        newSrc +=
-          'throw new Error(' +
-          JSON.stringify(
-            `Attempted to call the default export of ${context.url} from the server` +
-              `but it's on the client. It's not possible to invoke a client function from ` +
-              `the server, it can only be rendered as a Component or passed to props of a` +
-              `Client Component.`,
-          ) +
-          ');';
-      } else {
-        newSrc += 'export const ' + name + ' = ';
-        newSrc += 'export default ';
-        newSrc += 'Object.defineProperties(function() {';
-        newSrc +=
-          'throw new Error(' +
-          JSON.stringify(
-            `Attempted to call ${name}() from the server but ${name} is on the client. ` +
-              `It's not possible to invoke a client function from the server, it can ` +
-              `only be rendered as a Component or passed to props of a Client Component.`,
-          ) +
-          ');';
-      }
-      newSrc += '},{';
-      newSrc += 'name: { value: ' + JSON.stringify(name) + '},';
-      newSrc += '$$typeof: {value: CLIENT_REFERENCE},';
-      newSrc += 'filepath: {value: ' + JSON.stringify(context.url) + '}';
-      newSrc += '});\n';
-    }
-
     return {source: newSrc};
   }
   return transformed;
 }
+
+export async function load(
+  url: string,
+  context: LoadContext,
+  defaultLoad: LoadFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  if (context.format === 'module') {
+    const result = await defaultLoad(url, context, defaultLoad);
+    if (typeof result.source !== 'string') {
+      throw new Error('Expected source to have been loaded into a string.');
+    }
+    const newSrc = await transformClientModule(result.source, url, defaultLoad);
+    return {format: 'module', source: newSrc};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index d2045e9364f3b..5899ba52c1b5e 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+const acorn = require('acorn');
+
 const url = require('url');
 
 const Module = require('module');
@@ -204,8 +206,42 @@ module.exports = function register() {
   };
 
   // $FlowFixMe[prop-missing] found when upgrading Flow
-  Module._extensions['.client.js'] = function (module, path) {
-    const moduleId: string = (url.pathToFileURL(path).href: any);
+  const originalCompile = Module.prototype._compile;
+
+  // $FlowFixMe[prop-missing] found when upgrading Flow
+  Module.prototype._compile = function (
+    this: any,
+    content: string,
+    filename: string,
+  ): void {
+    // Do a quick check for the exact string. If it doesn't exist, don't
+    // bother parsing.
+    if (content.indexOf('use client') === -1) {
+      return originalCompile.apply(this, arguments);
+    }
+
+    const {body} = acorn.parse(content, {
+      ecmaVersion: '2019',
+      sourceType: 'source',
+    });
+
+    let useClient = false;
+    for (let i = 0; i < body.length; i++) {
+      const node = body[i];
+      if (node.type !== 'ExpressionStatement' || !node.directive) {
+        break;
+      }
+      if (node.directive === 'use client') {
+        useClient = true;
+        break;
+      }
+    }
+
+    if (!useClient) {
+      return originalCompile.apply(this, arguments);
+    }
+
+    const moduleId: string = (url.pathToFileURL(filename).href: any);
     const clientReference = Object.defineProperties(({}: any), {
       // Represents the whole Module object instead of a particular import.
       name: {value: '*'},
@@ -214,35 +250,6 @@ module.exports = function register() {
       async: {value: false},
     });
     // $FlowFixMe[incompatible-call] found when upgrading Flow
-    module.exports = new Proxy(clientReference, proxyHandlers);
-  };
-
-  // $FlowFixMe[prop-missing] found when upgrading Flow
-  const originalResolveFilename = Module._resolveFilename;
-
-  // $FlowFixMe[prop-missing] found when upgrading Flow
-  // $FlowFixMe[missing-this-annot]
-  Module._resolveFilename = function (request, parent, isMain, options) {
-    const resolved = originalResolveFilename.apply(this, arguments);
-    if (resolved.endsWith('.server.js')) {
-      if (
-        parent &&
-        parent.filename &&
-        !parent.filename.endsWith('.server.js')
-      ) {
-        let reason;
-        if (request.endsWith('.server.js')) {
-          reason = `"${request}"`;
-        } else {
-          reason = `"${request}" (which expands to "${resolved}")`;
-        }
-        throw new Error(
-          `Cannot import ${reason} from "${parent.filename}". ` +
-            'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
-            'That way nobody accidentally sends these to the client by indirectly importing it.',
-        );
-      }
-    }
-    return resolved;
+    this.exports = new Proxy(clientReference, proxyHandlers);
   };
 };
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index dd769f435c9e9..c40d6b1f56057 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -79,7 +79,7 @@ export default class ReactFlightWebpackPlugin {
         {
           directory: '.',
           recursive: true,
-          include: /\.client\.(js|ts|jsx|tsx)$/,
+          include: /\.(js|ts|jsx|tsx)$/,
         },
       ];
     } else if (
@@ -231,7 +231,7 @@ export default class ReactFlightWebpackPlugin {
               // That way we know by the type of dep whether to include.
               // It also resolves conflicts when the same module is in multiple chunks.
 
-              if (!/\.client\.(js|ts)x?$/.test(module.resource)) {
+              if (!/\.(js|ts)x?$/.test(module.resource)) {
                 return;
               }
 
diff --git a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
index 607e6e0d6c76c..3ddfffc57716a 100644
--- a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
+++ b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
@@ -21,21 +21,21 @@ global.__webpack_require__ = function (id) {
   return webpackModules[id];
 };
 
-const previousLoader = Module._extensions['.client.js'];
+const previousCompile = Module.prototype._compile;
 
 const register = require('react-server-dom-webpack/node-register');
-// Register node loader
+// Register node compile
 register();
 
-const nodeLoader = Module._extensions['.client.js'];
+const nodeCompile = Module.prototype._compile;
 
-if (previousLoader === nodeLoader) {
+if (previousCompile === nodeCompile) {
   throw new Error(
-    'Expected the Node loader to register the .client.js extension',
+    'Expected the Node loader to register the _compile extension',
   );
 }
 
-Module._extensions['.client.js'] = previousLoader;
+Module.prototype._compile = previousCompile;
 
 exports.webpackMap = webpackMap;
 exports.webpackModules = webpackModules;
@@ -57,7 +57,7 @@ exports.clientModuleError = function clientModuleError(moduleError) {
     },
   };
   const mod = {exports: {}};
-  nodeLoader(mod, idx);
+  nodeCompile.call(mod, '"use client"', idx);
   return mod.exports;
 };
 
@@ -99,6 +99,6 @@ exports.clientExports = function clientExports(moduleExports) {
     };
   }
   const mod = {exports: {}};
-  nodeLoader(mod, idx);
+  nodeCompile.call(mod, '"use client"', idx);
   return mod.exports;
 };
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index f6e63c2d9519a..2b81e666732fa 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -950,7 +950,7 @@ deepFreeze(bundles);
 deepFreeze(bundleTypes);
 deepFreeze(moduleTypes);
 
-function getOriginalFilename(bundle, bundleType) {
+function getFilename(bundle, bundleType) {
   let name = bundle.name || bundle.entry;
   const globalName = bundle.global;
   // we do this to replace / to -, for react-dom/server
@@ -993,23 +993,6 @@ function getOriginalFilename(bundle, bundleType) {
   }
 }
 
-function getFilename(bundle, bundleType) {
-  const originalFilename = getOriginalFilename(bundle, bundleType);
-  // Ensure .server.js or .client.js is the final suffix.
-  // This is important for the Server tooling convention.
-  if (originalFilename.indexOf('.server.') !== -1) {
-    return originalFilename
-      .replace('.server.', '.')
-      .replace('.js', '.server.js');
-  }
-  if (originalFilename.indexOf('.client.') !== -1) {
-    return originalFilename
-      .replace('.client.', '.')
-      .replace('.js', '.client.js');
-  }
-  return originalFilename;
-}
-
 module.exports = {
   bundleTypes,
   moduleTypes,

From 01a0c4e12c6aa9732d290e13b1452f72d276934d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 7 Feb 2023 15:10:01 -0500
Subject: [PATCH 4/9] Add Edge Server Builds for workerd / edge-light (#26116)

We currently abuse the browser builds for Web streams derived
environments. We already have a special build for Bun but we should also
have one for [other "edge"
runtimes](https://runtime-keys.proposal.wintercg.org/) so that we can
maximally take advantage of the APIs that exist on each platform.

In practice, we currently check for a global property called
`AsyncLocalStorage` in the server browser builds which we shouldn't
really do since browsers likely won't ever have it. Additionally, this
should probably move to an import which we can't add to actual browser
builds where that will be an invalid import. So it has to be a separate
build. That's not done yet in this PR but Vercel will follow
Cloudflare's lead here.

The `deno` key still points to the browser build since there's no
AsyncLocalStorage there but it could use this same or a custom build if
support is added.
---
 .../ReactFlightClientHostConfig.dom-edge.js   |  12 ++
 packages/react-dom/npm/server.edge.js         |  18 ++
 packages/react-dom/npm/static.edge.js         |   7 +
 packages/react-dom/package.json               |   8 +
 packages/react-dom/server.edge.js             |  47 +++++
 .../src/server/ReactDOMFizzServerEdge.js      | 116 +++++++++++++
 .../src/server/ReactDOMFizzStaticEdge.js      | 101 +++++++++++
 packages/react-dom/static.edge.js             |  10 ++
 .../forks/ReactFiberHostConfig.dom-edge.js    |  10 ++
 .../npm/server.edge.js                        |   7 +
 .../react-server-dom-webpack/package.json     |   7 +-
 .../react-server-dom-webpack/server.edge.js   |  10 ++
 .../src/ReactFlightDOMServerEdge.js           |  69 ++++++++
 .../src/ReactServerStreamConfigBrowser.js     |   6 +-
 .../src/ReactServerStreamConfigEdge.js        | 161 ++++++++++++++++++
 .../forks/ReactFlightServerConfig.dom-edge.js |  11 ++
 .../forks/ReactServerFormatConfig.dom-edge.js |  10 ++
 .../forks/ReactServerStreamConfig.dom-edge.js |  10 ++
 .../react/src/__tests__/ReactFetch-test.js    |   2 -
 .../src/__tests__/ReactFetchEdge-test.js      |  80 +++++++++
 scripts/rollup/bundles.js                     |  31 ++++
 scripts/shared/inlinedHostConfigs.js          |  35 ++++
 22 files changed, 761 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge.js
 create mode 100644 packages/react-dom/npm/server.edge.js
 create mode 100644 packages/react-dom/npm/static.edge.js
 create mode 100644 packages/react-dom/server.edge.js
 create mode 100644 packages/react-dom/src/server/ReactDOMFizzServerEdge.js
 create mode 100644 packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
 create mode 100644 packages/react-dom/static.edge.js
 create mode 100644 packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-edge.js
 create mode 100644 packages/react-server-dom-webpack/npm/server.edge.js
 create mode 100644 packages/react-server-dom-webpack/server.edge.js
 create mode 100644 packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
 create mode 100644 packages/react-server/src/ReactServerStreamConfigEdge.js
 create mode 100644 packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
 create mode 100644 packages/react-server/src/forks/ReactServerFormatConfig.dom-edge.js
 create mode 100644 packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js
 create mode 100644 packages/react/src/__tests__/ReactFetchEdge-test.js

diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge.js
new file mode 100644
index 0000000000000..4aae8141fd56e
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge.js
@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+
+export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
diff --git a/packages/react-dom/npm/server.edge.js b/packages/react-dom/npm/server.edge.js
new file mode 100644
index 0000000000000..9b46751ab208f
--- /dev/null
+++ b/packages/react-dom/npm/server.edge.js
@@ -0,0 +1,18 @@
+'use strict';
+
+var b;
+var l;
+if (process.env.NODE_ENV === 'production') {
+  b = require('./cjs/react-dom-server.edge.production.min.js');
+  l = require('./cjs/react-dom-server-legacy.browser.production.min.js');
+} else {
+  b = require('./cjs/react-dom-server.edge.development.js');
+  l = require('./cjs/react-dom-server-legacy.browser.development.js');
+}
+
+exports.version = b.version;
+exports.renderToReadableStream = b.renderToReadableStream;
+exports.renderToNodeStream = b.renderToNodeStream;
+exports.renderToStaticNodeStream = b.renderToStaticNodeStream;
+exports.renderToString = l.renderToString;
+exports.renderToStaticMarkup = l.renderToStaticMarkup;
diff --git a/packages/react-dom/npm/static.edge.js b/packages/react-dom/npm/static.edge.js
new file mode 100644
index 0000000000000..9202efd20cf3f
--- /dev/null
+++ b/packages/react-dom/npm/static.edge.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom-static.edge.production.min.js');
+} else {
+  module.exports = require('./cjs/react-dom-static.edge.development.js');
+}
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 3ee587be55434..d38382b9f2717 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -31,10 +31,12 @@
     "profiling.js",
     "server.js",
     "server.browser.js",
+    "server.edge.js",
     "server.node.js",
     "server.bun.js",
     "static.js",
     "static.browser.js",
+    "static.edge.js",
     "static.node.js",
     "server-rendering-stub.js",
     "test-utils.js",
@@ -47,6 +49,8 @@
     ".": "./index.js",
     "./client": "./client.js",
     "./server": {
+      "workerd": "./server.edge.js",
+      "edge-light": "./server.edge.js",
       "bun": "./server.bun.js",
       "deno": "./server.browser.js",
       "worker": "./server.browser.js",
@@ -54,14 +58,18 @@
       "default": "./server.node.js"
     },
     "./server.browser": "./server.browser.js",
+    "./server.edge": "./server.edge.js",
     "./server.node": "./server.node.js",
     "./static": {
+      "workerd": "./static.edge.js",
+      "edge-light": "./static.edge.js",
       "deno": "./static.browser.js",
       "worker": "./static.browser.js",
       "browser": "./static.browser.js",
       "default": "./static.node.js"
     },
     "./static.browser": "./static.browser.js",
+    "./static.edge": "./static.edge.js",
     "./static.node": "./static.node.js",
     "./server-rendering-stub": "./server-rendering-stub.js",
     "./profiling": "./profiling.js",
diff --git a/packages/react-dom/server.edge.js b/packages/react-dom/server.edge.js
new file mode 100644
index 0000000000000..f45eae21e7d49
--- /dev/null
+++ b/packages/react-dom/server.edge.js
@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+
+// This file is only used for tests.
+// It lazily loads the implementation so that we get the correct set of host configs.
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export function renderToReadableStream() {
+  return require('./src/server/ReactDOMFizzServerEdge').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToNodeStream() {
+  return require('./src/server/ReactDOMFizzServerEdge').renderToNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToStaticNodeStream() {
+  return require('./src/server/ReactDOMFizzServerEdge').renderToStaticNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToString() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToString.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToStaticMarkup() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToStaticMarkup.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
new file mode 100644
index 0000000000000..59576a127ea78
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
@@ -0,0 +1,116 @@
+/**
+ * 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
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  nonce?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+};
+
+// TODO: Move to sub-classing ReadableStream.
+type ReactDOMServerReadableStream = ReadableStream & {
+  allReady: Promise<void>,
+};
+
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            abort(request);
+          },
+        },
+        // $FlowFixMe size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+    const request = createRequest(
+      children,
+      createResponseState(
+        options ? options.identifierPrefix : undefined,
+        options ? options.nonce : undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {renderToReadableStream, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
new file mode 100644
index 0000000000000..7f88593dd50f8
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
@@ -0,0 +1,101 @@
+/**
+ * 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
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+};
+
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+        },
+        // $FlowFixMe size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result = {
+        prelude: stream,
+      };
+      resolve(result);
+    }
+    const request = createRequest(
+      children,
+      createResponseState(
+        options ? options.identifierPrefix : undefined,
+        undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {prerender, ReactVersion as version};
diff --git a/packages/react-dom/static.edge.js b/packages/react-dom/static.edge.js
new file mode 100644
index 0000000000000..74361b0e6dedf
--- /dev/null
+++ b/packages/react-dom/static.edge.js
@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+export {prerender, version} from './src/server/ReactDOMFizzStaticEdge';
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-edge.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-edge.js
new file mode 100644
index 0000000000000..aae45be9aae50
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-edge.js
@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+export * from 'react-dom-bindings/src/client/ReactDOMHostConfig';
diff --git a/packages/react-server-dom-webpack/npm/server.edge.js b/packages/react-server-dom-webpack/npm/server.edge.js
new file mode 100644
index 0000000000000..d061fe624e78f
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/server.edge.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-server.edge.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-server.edge.development.js');
+}
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index f68394b92fc4b..8bf5e8c18e19e 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -16,6 +16,7 @@
     "client.js",
     "server.js",
     "server.browser.js",
+    "server.edge.js",
     "server.node.js",
     "node-register.js",
     "cjs/",
@@ -28,13 +29,17 @@
     "./client": "./client.js",
     "./server": {
       "react-server": {
+        "edge-light": "./server.edge.js",
+        "workerd": "./server.edge.js",
+        "deno": "./server.browser.js",
         "node": "./server.node.js",
         "browser": "./server.browser.js"
       },
       "default": "./server.js"
     },
-    "./server.node": "./server.node.js",
     "./server.browser": "./server.browser.js",
+    "./server.edge": "./server.edge.js",
+    "./server.node": "./server.node.js",
     "./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
     "./node-register": "./node-register.js",
     "./src/*": "./src/*",
diff --git a/packages/react-server-dom-webpack/server.edge.js b/packages/react-server-dom-webpack/server.edge.js
new file mode 100644
index 0000000000000..98f975cb4706f
--- /dev/null
+++ b/packages/react-server-dom-webpack/server.edge.js
@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+export * from './src/ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
new file mode 100644
index 0000000000000..be2343121e2a0
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
@@ -0,0 +1,69 @@
+/**
+ * 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
+ */
+
+import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {ServerContextJSONValue} from 'shared/ReactTypes';
+import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFlightServer';
+
+type Options = {
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  context?: Array<[string, ServerContextJSONValue]>,
+  onError?: (error: mixed) => void,
+};
+
+function renderToReadableStream(
+  model: ReactModel,
+  webpackMap: BundlerConfig,
+  options?: Options,
+): ReadableStream {
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {},
+    },
+    // $FlowFixMe size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+export {renderToReadableStream};
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index 22ac22f85d569..443b5e7866bbe 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -21,11 +21,9 @@ export function flushBuffered(destination: Destination) {
   // transform streams. https://github.com/whatwg/streams/issues/960
 }
 
-// For now we support AsyncLocalStorage as a global for the "browser" builds
-// TODO: Move this to some special WinterCG build.
-export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
+export const supportsRequestStorage = false;
 export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
-  supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
+  (null: any);
 
 const VIEW_SIZE = 512;
 let currentView = null;
diff --git a/packages/react-server/src/ReactServerStreamConfigEdge.js b/packages/react-server/src/ReactServerStreamConfigEdge.js
new file mode 100644
index 0000000000000..a898e6b8d40fe
--- /dev/null
+++ b/packages/react-server/src/ReactServerStreamConfigEdge.js
@@ -0,0 +1,161 @@
+/**
+ * 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
+ */
+
+export type Destination = ReadableStreamController;
+
+export type PrecomputedChunk = Uint8Array;
+export opaque type Chunk = Uint8Array;
+
+export function scheduleWork(callback: () => void) {
+  callback();
+}
+
+export function flushBuffered(destination: Destination) {
+  // WHATWG Streams do not yet have a way to flush the underlying
+  // transform streams. https://github.com/whatwg/streams/issues/960
+}
+
+// For now, we get this from the global scope, but this will likely move to a module.
+export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
+export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
+  supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
+
+const VIEW_SIZE = 512;
+let currentView = null;
+let writtenBytes = 0;
+
+export function beginWriting(destination: Destination) {
+  currentView = new Uint8Array(VIEW_SIZE);
+  writtenBytes = 0;
+}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk,
+): void {
+  if (chunk.length === 0) {
+    return;
+  }
+
+  if (chunk.length > VIEW_SIZE) {
+    if (__DEV__) {
+      if (precomputedChunkSet.has(chunk)) {
+        console.error(
+          'A large precomputed chunk was passed to writeChunk without being copied.' +
+            ' Large chunks get enqueued directly and are not copied. This is incompatible with precomputed chunks because you cannot enqueue the same precomputed chunk twice.' +
+            ' Use "cloneChunk" to make a copy of this large precomputed chunk before writing it. This is a bug in React.',
+        );
+      }
+    }
+    // this chunk may overflow a single view which implies it was not
+    // one that is cached by the streaming renderer. We will enqueu
+    // it directly and expect it is not re-used
+    if (writtenBytes > 0) {
+      destination.enqueue(
+        new Uint8Array(
+          ((currentView: any): Uint8Array).buffer,
+          0,
+          writtenBytes,
+        ),
+      );
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
+    destination.enqueue(chunk);
+    return;
+  }
+
+  let bytesToWrite = chunk;
+  const allowableBytes = ((currentView: any): Uint8Array).length - writtenBytes;
+  if (allowableBytes < bytesToWrite.length) {
+    // this chunk would overflow the current view. We enqueue a full view
+    // and start a new view with the remaining chunk
+    if (allowableBytes === 0) {
+      // the current view is already full, send it
+      destination.enqueue(currentView);
+    } else {
+      // fill up the current view and apply the remaining chunk bytes
+      // to a new view.
+      ((currentView: any): Uint8Array).set(
+        bytesToWrite.subarray(0, allowableBytes),
+        writtenBytes,
+      );
+      // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
+      destination.enqueue(currentView);
+      bytesToWrite = bytesToWrite.subarray(allowableBytes);
+    }
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+  ((currentView: any): Uint8Array).set(bytesToWrite, writtenBytes);
+  writtenBytes += bytesToWrite.length;
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk,
+): boolean {
+  writeChunk(destination, chunk);
+  // in web streams there is no backpressure so we can alwas write more
+  return true;
+}
+
+export function completeWriting(destination: Destination) {
+  if (currentView && writtenBytes > 0) {
+    destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
+    currentView = null;
+    writtenBytes = 0;
+  }
+}
+
+export function close(destination: Destination) {
+  destination.close();
+}
+
+const textEncoder = new TextEncoder();
+
+export function stringToChunk(content: string): Chunk {
+  return textEncoder.encode(content);
+}
+
+const precomputedChunkSet: Set<Chunk> = __DEV__ ? new Set() : (null: any);
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  const precomputedChunk = textEncoder.encode(content);
+
+  if (__DEV__) {
+    precomputedChunkSet.add(precomputedChunk);
+  }
+
+  return precomputedChunk;
+}
+
+export function clonePrecomputedChunk(
+  precomputedChunk: PrecomputedChunk,
+): PrecomputedChunk {
+  return precomputedChunk.length > VIEW_SIZE
+    ? precomputedChunk.slice()
+    : precomputedChunk;
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe[method-unbinding]
+  if (typeof destination.error === 'function') {
+    // $FlowFixMe: This is an Error object or the destination accepts other types.
+    destination.error(error);
+  } else {
+    // Earlier implementations doesn't support this method. In that environment you're
+    // supposed to throw from a promise returned but we don't return a promise in our
+    // approach. We could fork this implementation but this is environment is an edge
+    // case to begin with. It's even less common to run this in an older environment.
+    // Even then, this is not where errors are supposed to happen and they get reported
+    // to a global callback in addition to this anyway. So it's fine just to close this.
+    destination.close();
+  }
+}
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
new file mode 100644
index 0000000000000..99c541a937d63
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
@@ -0,0 +1,11 @@
+/**
+ * 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
+ */
+
+export * from '../ReactFlightServerConfigStream';
+export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-edge.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-edge.js
new file mode 100644
index 0000000000000..485793a6893ee
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom-edge.js
@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+export * from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js
new file mode 100644
index 0000000000000..a594d19afc749
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js
@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+export * from '../ReactServerStreamConfigEdge';
diff --git a/packages/react/src/__tests__/ReactFetch-test.js b/packages/react/src/__tests__/ReactFetch-test.js
index 00f274d5c0da1..753cb03324991 100644
--- a/packages/react/src/__tests__/ReactFetch-test.js
+++ b/packages/react/src/__tests__/ReactFetch-test.js
@@ -17,8 +17,6 @@ global.TextDecoder = require('util').TextDecoder;
 global.Headers = require('node-fetch').Headers;
 global.Request = require('node-fetch').Request;
 global.Response = require('node-fetch').Response;
-// Patch for Browser environments to be able to polyfill AsyncLocalStorage
-global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage;
 
 let fetchCount = 0;
 async function fetchMock(resource, options) {
diff --git a/packages/react/src/__tests__/ReactFetchEdge-test.js b/packages/react/src/__tests__/ReactFetchEdge-test.js
new file mode 100644
index 0000000000000..10484b853bf50
--- /dev/null
+++ b/packages/react/src/__tests__/ReactFetchEdge-test.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+global.Headers = require('node-fetch').Headers;
+global.Request = require('node-fetch').Request;
+global.Response = require('node-fetch').Response;
+// Patch for Edge environments for global scope
+global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage;
+
+let fetchCount = 0;
+async function fetchMock(resource, options) {
+  fetchCount++;
+  const request = new Request(resource, options);
+  return new Response(
+    request.method +
+      ' ' +
+      request.url +
+      ' ' +
+      JSON.stringify(Array.from(request.headers.entries())),
+  );
+}
+
+let React;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let use;
+
+describe('ReactFetch', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    fetchCount = 0;
+    global.fetch = fetchMock;
+
+    if (gate(flags => !flags.www)) {
+      jest.mock('react', () => require('react/react.shared-subset'));
+    }
+
+    React = require('react');
+    ReactServerDOMServer = require('react-server-dom-webpack/server.edge');
+    ReactServerDOMClient = require('react-server-dom-webpack/client');
+    use = React.use;
+  });
+
+  async function render(Component) {
+    const stream = ReactServerDOMServer.renderToReadableStream(<Component />);
+    return ReactServerDOMClient.createFromReadableStream(stream);
+  }
+
+  // @gate enableFetchInstrumentation && enableCache
+  it('can dedupe fetches separately in interleaved renders', async () => {
+    async function getData() {
+      const r1 = await fetch('hi');
+      const t1 = await r1.text();
+      const r2 = await fetch('hi');
+      const t2 = await r2.text();
+      return t1 + ' ' + t2;
+    }
+    function Component() {
+      return use(getData());
+    }
+    const render1 = render(Component);
+    const render2 = render(Component);
+    expect(await render1).toMatchInlineSnapshot(`"GET hi [] GET hi []"`);
+    expect(await render2).toMatchInlineSnapshot(`"GET hi [] GET hi []"`);
+    expect(fetchCount).toBe(2);
+  });
+});
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 2b81e666732fa..3b97f2ef2c6b7 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -258,6 +258,19 @@ const bundles = [
     externals: ['react', 'react-dom'],
   },
 
+  /******* React DOM Fizz Server Edge *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/ReactDOMFizzServerEdge.js',
+    name: 'react-dom-server.edge', // 'node_modules/react/*.js',
+
+    global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
   /******* React DOM Fizz Server Bun *******/
   {
     bundleTypes: [BUN_DEV, BUN_PROD],
@@ -291,6 +304,15 @@ const bundles = [
     wrapWithModuleBoundaries: false,
     externals: ['react', 'util', 'async_hooks', 'stream', 'react-dom'],
   },
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
+    moduleType: RENDERER,
+    entry: 'react-dom/static.edge',
+    global: 'ReactDOMStatic',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
 
   /******* React DOM Fizz Server External Runtime *******/
   {
@@ -335,6 +357,15 @@ const bundles = [
     wrapWithModuleBoundaries: false,
     externals: ['react', 'util', 'async_hooks', 'react-dom'],
   },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/server.edge',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'util', 'async_hooks', 'react-dom'],
+  },
 
   /******* React Server DOM Webpack Client *******/
   {
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 3f7a41021aa6e..9a4a37539ab9b 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -99,6 +99,41 @@ module.exports = [
     isFlowTyped: true,
     isServerSupported: true,
   },
+  {
+    shortName: 'dom-edge',
+    entryPoints: [
+      'react-dom',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/ReactDOMFizzServerEdge.js',
+      'react-dom/static.edge',
+      'react-dom/server-rendering-stub',
+      'react-dom/unstable_server-external-runtime',
+      'react-server-dom-webpack/server.edge',
+      'react-server-dom-webpack/client',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/server.edge',
+      'react-dom/static.edge',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
+      'react-dom/src/server/ReactDOMFizzStaticEdge.js',
+      'react-server-dom-webpack',
+      'react-server-dom-webpack/client',
+      'react-server-dom-webpack/server.edge',
+      'react-server-dom-webpack/src/ReactFlightDOMServerEdge.js', // react-server-dom-webpack/server.edge
+      'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
   {
     shortName: 'dom-legacy',
     entryPoints: [

From 758fc7fde10f49912b18496299506cba30d6029b Mon Sep 17 00:00:00 2001
From: Xin Chen <1658237+ryancat@users.noreply.github.com>
Date: Tue, 7 Feb 2023 14:47:05 -0800
Subject: [PATCH 5/9] Support highlights for React Native apps in dev tools
 (#26060)

<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn debug-test --watch TestName`, open
`chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This pull request emit the trace update events `drawTraceUpdates` with
the trace frame information when the trace update drawer runs outside of
web environment. This allows React Devtool running in mobile or other
platforms have a chance to render such highlights and provide similar
feature on web to provide re-render highlights. This is a feature needed
for identifying unnecessary re-renders.

## How did you test this change?

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

I tested this change with Flipper desktop app running against mobile
app, and verified that the event with correct array of frames are
passing through properly.
---
 .../react-devtools-core/src/standalone.js     |  1 +
 .../src/backend/agent.js                      |  2 +
 .../src/backend/views/TraceUpdates/canvas.js  | 37 +++++++++++++++----
 .../src/backend/views/TraceUpdates/index.js   |  4 +-
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 71e744741ec21..12b76dae9034a 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -262,6 +262,7 @@ function initialize(socket: WebSocket) {
   store = new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsNativeInspection: true,
+    supportsTraceUpdates: true,
   });
 
   log('Connected');
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 8f83437634e43..0b78fce3c22ca 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -148,6 +148,8 @@ export default class Agent extends EventEmitter<{
   stopInspectingNative: [],
   shutdown: [],
   traceUpdates: [Set<NativeType>],
+  drawTraceUpdates: [Array<NativeType>],
+  disableTraceUpdates: [],
 }> {
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
index 155e0b29368d5..5d560273d61dc 100644
--- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
@@ -10,6 +10,7 @@
 import type {Data} from './index';
 import type {Rect} from '../utils';
 import type {NativeType} from '../../types';
+import type Agent from '../../agent';
 
 const OUTLINE_COLOR = '#f0f0f0';
 
@@ -29,7 +30,17 @@ const COLORS = [
 
 let canvas: HTMLCanvasElement | null = null;
 
-export function draw(nodeToData: Map<NativeType, Data>): void {
+export function draw(nodeToData: Map<NativeType, Data>, agent: Agent): void {
+  if (window.document == null) {
+    const nodesToDraw = [];
+    iterateNodes(nodeToData, (_, color, node) => {
+      nodesToDraw.push({node, color});
+    });
+
+    agent.emit('drawTraceUpdates', nodesToDraw);
+    return;
+  }
+
   if (canvas === null) {
     initialize();
   }
@@ -40,17 +51,24 @@ export function draw(nodeToData: Map<NativeType, Data>): void {
 
   const context = canvasFlow.getContext('2d');
   context.clearRect(0, 0, canvasFlow.width, canvasFlow.height);
-
-  nodeToData.forEach(({count, rect}) => {
+  iterateNodes(nodeToData, (rect, color) => {
     if (rect !== null) {
-      const colorIndex = Math.min(COLORS.length - 1, count - 1);
-      const color = COLORS[colorIndex];
-
       drawBorder(context, rect, color);
     }
   });
 }
 
+function iterateNodes(
+  nodeToData: Map<NativeType, Data>,
+  execute: (rect: Rect | null, color: string, node: NativeType) => void,
+) {
+  nodeToData.forEach(({count, rect}, node) => {
+    const colorIndex = Math.min(COLORS.length - 1, count - 1);
+    const color = COLORS[colorIndex];
+    execute(rect, color, node);
+  });
+}
+
 function drawBorder(
   context: CanvasRenderingContext2D,
   rect: Rect,
@@ -79,7 +97,12 @@ function drawBorder(
   context.setLineDash([0]);
 }
 
-export function destroy(): void {
+export function destroy(agent: Agent): void {
+  if (window.document == null) {
+    agent.emit('disableTraceUpdates');
+    return;
+  }
+
   if (canvas !== null) {
     if (canvas.parentNode != null) {
       canvas.parentNode.removeChild(canvas);
diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
index 105dfd2cca3c2..8c774e3f1b6e2 100644
--- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
@@ -66,7 +66,7 @@ export function toggleEnabled(value: boolean): void {
       redrawTimeoutID = null;
     }
 
-    destroyCanvas();
+    destroyCanvas(agent);
   }
 }
 
@@ -126,7 +126,7 @@ function prepareToDraw(): void {
     }
   });
 
-  draw(nodeToData);
+  draw(nodeToData, agent);
 
   if (earliestExpiration !== Number.MAX_VALUE) {
     redrawTimeoutID = setTimeout(prepareToDraw, earliestExpiration - now);

From a3152eda5f89e20f056521855f7fa101ce50e4c3 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 8 Feb 2023 11:32:38 -0800
Subject: [PATCH 6/9] support ReactDOM.render(..., document) without crashing
 (#26129)

as reported in #26128 `ReactDOM.render(..., document)` crashed when
`enableHostSingletons` was on. This is because it had a different way of
clearing the container than `createRoot(document)`. I updated the legacy
implementation to share the clearing behavior of `creatRoot` which will
preserve the singleton instances.

I also removed the warning saying not to use `document.body` as a
container
---
 .../ReactDOMSingletonComponents-test.js        | 17 +++++++++++++++++
 .../react-dom/src/__tests__/ReactMount-test.js | 17 +++++++++++------
 .../src/__tests__/validateDOMNesting-test.js   | 18 +++++++++---------
 .../react-dom/src/client/ReactDOMLegacy.js     |  8 ++++----
 4 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
index 026302c18cc27..f78a7290b9c90 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
@@ -13,6 +13,7 @@ let JSDOM;
 let Stream;
 let Scheduler;
 let React;
+let ReactDOM;
 let ReactDOMClient;
 let ReactDOMFizzServer;
 let document;
@@ -28,6 +29,7 @@ describe('ReactDOM HostSingleton', () => {
     JSDOM = require('jsdom').JSDOM;
     Scheduler = require('scheduler');
     React = require('react');
+    ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
     ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
@@ -1007,4 +1009,19 @@ describe('ReactDOM HostSingleton', () => {
       </html>,
     );
   });
+
+  // https://github.com/facebook/react/issues/26128
+  it('(#26128) does not throw when rendering at body', async () => {
+    ReactDOM.render(<div />, document.body);
+  });
+
+  // https://github.com/facebook/react/issues/26128
+  it('(#26128) does not throw when rendering at <html>', async () => {
+    ReactDOM.render(<body />, document.documentElement);
+  });
+
+  // https://github.com/facebook/react/issues/26128
+  it('(#26128) does not throw when rendering at document', async () => {
+    ReactDOM.render(<html />, document);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
index c69ed03559a66..f383bec90f3cb 100644
--- a/packages/react-dom/src/__tests__/ReactMount-test.js
+++ b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -149,12 +149,17 @@ describe('ReactMount', () => {
     const iFrame = document.createElement('iframe');
     document.body.appendChild(iFrame);
 
-    expect(() =>
-      ReactDOM.render(<div />, iFrame.contentDocument.body),
-    ).toErrorDev(
-      'Rendering components directly into document.body is discouraged',
-      {withoutStack: true},
-    );
+    if (gate(flags => flags.enableHostSingletons)) {
+      // HostSingletons make the warning for document.body unecessary
+      ReactDOM.render(<div />, iFrame.contentDocument.body);
+    } else {
+      expect(() =>
+        ReactDOM.render(<div />, iFrame.contentDocument.body),
+      ).toErrorDev(
+        'Rendering components directly into document.body is discouraged',
+        {withoutStack: true},
+      );
+    }
   });
 
   it('should account for escaping on a checksum mismatch', () => {
diff --git a/packages/react-dom/src/__tests__/validateDOMNesting-test.js b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
index f6ec407ff9bc3..ca1d921134785 100644
--- a/packages/react-dom/src/__tests__/validateDOMNesting-test.js
+++ b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
@@ -28,9 +28,11 @@ function expectWarnings(tags, warnings = [], withoutStack = 0) {
     element = <Tag>{element}</Tag>;
   }
 
-  expect(() => ReactDOM.render(element, container)).toErrorDev(warnings, {
-    withoutStack,
-  });
+  if (warnings.length) {
+    expect(() => ReactDOM.render(element, container)).toErrorDev(warnings, {
+      withoutStack,
+    });
+  }
 }
 
 describe('validateDOMNesting', () => {
@@ -39,8 +41,10 @@ describe('validateDOMNesting', () => {
     expectWarnings(
       ['body', 'datalist', 'option'],
       [
-        'render(): Rendering components directly into document.body is discouraged',
-      ],
+        gate(flags => !flags.enableHostSingletons)
+          ? 'render(): Rendering components directly into document.body is discouraged'
+          : null,
+      ].filter(Boolean),
       1,
     );
     expectWarnings(['div', 'a', 'object', 'a']);
@@ -106,13 +110,9 @@ describe('validateDOMNesting', () => {
       expectWarnings(
         ['body', 'body'],
         [
-          'render(): Rendering components directly into document.body is discouraged',
           'validateDOMNesting(...): <body> cannot appear as a child of <body>.\n' +
             '    in body (at **)',
-          'Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <body> and if you need to mount a new one, ensure any previous ones have unmounted first.\n' +
-            '    in body (at **)',
         ],
-        1,
       );
     } else {
       expectWarnings(
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index b1f06e6e15dbe..d2125b9adab02 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -14,6 +14,7 @@ import type {
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import {clearContainer} from 'react-dom-bindings/src/client/ReactDOMHostConfig';
 import {
   getInstanceFromNode,
   isContainerMarkedAsRoot,
@@ -42,6 +43,7 @@ import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {has as hasInstance} from 'shared/ReactInstanceMap';
+import {enableHostSingletons} from '../../../shared/ReactFeatureFlags';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -79,6 +81,7 @@ if (__DEV__) {
     }
 
     if (
+      !enableHostSingletons &&
       container.nodeType === ELEMENT_NODE &&
       ((container: any): Element).tagName &&
       ((container: any): Element).tagName.toUpperCase() === 'BODY'
@@ -152,10 +155,7 @@ function legacyCreateRootFromDOMContainer(
     return root;
   } else {
     // First clear any existing content.
-    let rootSibling;
-    while ((rootSibling = container.lastChild)) {
-      container.removeChild(rootSibling);
-    }
+    clearContainer(container);
 
     if (typeof callback === 'function') {
       const originalCallback = callback;

From 78d2e9e2a894a7ea9aa3f9faadfc4c6038e86a75 Mon Sep 17 00:00:00 2001
From: Mark Erikson <mark@isquaredsoftware.com>
Date: Wed, 8 Feb 2023 20:00:22 -0500
Subject: [PATCH 7/9] Replace DevTools `semver` usages with `compare-versions`
 for smaller bundle size (#26122)

<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn debug-test --watch TestName`, open
`chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

This PR:

- Replaces the existing usages of methods from the `semver` library in
the React DevTools source with an inlined version based on
https://www.npmjs.com/package/semver-compare.

This appears to drop the unminified bundle sizes of 3 separate
`react-devtools-extensions` build artifacts by about 50K:


![image](https://user-images.githubusercontent.com/1128784/217326947-4c26d1be-d834-4f77-9e6e-be2d5ed0954d.png)


## How did you test this change?

I was originally working on [a fork of React
DevTools](https://github.com/replayio/react/pull/2) for use with
https://replay.io , specifically our integration of the React DevTools
UI to show the React component tree while users are debugging a recorded
application.

As part of the dev work on that fork, I wanted to shrink the bundle size
of the extension's generated JS build artifacts. I noted that the
official NPM `semver` library was taking up a noticeable chunk of space
in the bundles, and saw that it's only being used in a handful of places
to do some very simple version string comparisons.

I was able to replace the `semver` imports and usages with a simple
alternate comparison function, and confirmed via hands-on checks and
console logging that the checks behaved the same way.

Given that, I wanted to upstream this particular change to help shrink
the real extension's bundle sizes.

I know that it's an extension, so bundle size isn't _as_ critical a
concern as it would be for a pure library. But, smaller download sizes
do benefit all users, and that also includes sites like CodeSandbox and
Replay that are using the React DevTools as a library as well.

I'm happy to tweak this PR if necessary.  Thanks!
---
 packages/react-devtools-shared/package.json      |  4 ++--
 .../src/__tests__/utils-test.js                  | 16 ++++++++++++++++
 .../src/backend/renderer.js                      |  2 +-
 .../react-devtools-shared/src/backend/utils.js   |  9 +++++++++
 .../src/e2e-regression/app-legacy.js             |  3 ++-
 yarn.lock                                        |  5 +++++
 6 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index 9d15ae7869d45..b03ce9ea74310 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -18,11 +18,11 @@
     "@reach/menu-button": "^0.16.1",
     "@reach/tooltip": "^0.16.0",
     "clipboard-js": "^0.3.6",
+    "compare-versions": "^5.0.3",
     "json5": "^2.1.3",
     "local-storage-fallback": "^4.1.1",
     "lodash.throttle": "^4.1.1",
     "memoize-one": "^3.1.1",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "semver": "^6.3.0"
+    "react-virtualized-auto-sizer": "^1.0.6"
   }
 }
diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js
index ecb2cac33eb2a..5cb94fc051cc0 100644
--- a/packages/react-devtools-shared/src/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -15,6 +15,8 @@ import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils'
 import {
   format,
   formatWithStyles,
+  gt,
+  gte,
 } from 'react-devtools-shared/src/backend/utils';
 import {
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
@@ -252,4 +254,18 @@ describe('utils', () => {
       ]);
     });
   });
+
+  describe('semver comparisons', () => {
+    it('gte should compare versions correctly', () => {
+      expect(gte('1.2.3', '1.2.1')).toBe(true);
+      expect(gte('1.2.1', '1.2.1')).toBe(true);
+      expect(gte('1.2.1', '1.2.2')).toBe(false);
+    });
+
+    it('gt should compare versions correctly', () => {
+      expect(gt('1.2.3', '1.2.1')).toBe(true);
+      expect(gt('1.2.1', '1.2.1')).toBe(false);
+      expect(gt('1.2.1', '1.2.2')).toBe(false);
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 1028e35726cad..cf2660fc690f3 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {gt, gte} from 'semver';
 import {
   ComponentFilterDisplayName,
   ComponentFilterElementType,
@@ -39,6 +38,7 @@ import {
   utfEncodeString,
 } from 'react-devtools-shared/src/utils';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+import {gt, gte} from 'react-devtools-shared/src/backend/utils';
 import {
   cleanForBridge,
   copyToClipboard,
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index be5bfa56a869a..7ae15e173dfbb 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -9,6 +9,7 @@
  */
 
 import {copy} from 'clipboard-js';
+import {compareVersions} from 'compare-versions';
 import {dehydrate} from '../hydration';
 import isArray from 'shared/isArray';
 
@@ -275,3 +276,11 @@ export function isSynchronousXHRSupported(): boolean {
     window.document.featurePolicy.allowsFeature('sync-xhr')
   );
 }
+
+export function gt(a: string = '', b: string = ''): boolean {
+  return compareVersions(a, b) === 1;
+}
+
+export function gte(a: string = '', b: string = ''): boolean {
+  return compareVersions(a, b) > -1;
+}
diff --git a/packages/react-devtools-shell/src/e2e-regression/app-legacy.js b/packages/react-devtools-shell/src/e2e-regression/app-legacy.js
index dedbed5e73f7a..e8bb10fda091b 100644
--- a/packages/react-devtools-shell/src/e2e-regression/app-legacy.js
+++ b/packages/react-devtools-shell/src/e2e-regression/app-legacy.js
@@ -4,9 +4,10 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {gte} from 'semver';
 import ListApp from '../e2e-apps/ListApp';
 import ListAppLegacy from '../e2e-apps/ListAppLegacy';
+import {gte} from 'react-devtools-shared/src/backend/utils';
+
 const version = process.env.E2E_APP_REACT_VERSION;
 
 function mountApp(App: () => React$Node) {
diff --git a/yarn.lock b/yarn.lock
index 37be19fac609c..966bfe2fa541f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5458,6 +5458,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compare-versions@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-5.0.3.tgz#a9b34fea217472650ef4a2651d905f42c28ebfd7"
+  integrity sha512-4UZlZP8Z99MGEY+Ovg/uJxJuvoXuN4M6B3hKaiackiHrgzQFEe3diJi1mf1PNHbFujM7FvLrK2bpgIaImbtZ1A==
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"

From 3ff1540e9bbe30aae52e2c9ab61c843bd0c94237 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 9 Feb 2023 11:54:35 +0100
Subject: [PATCH 8/9] Prefer JSX in ReactNoop assertions (to combat
 out-of-memory test runs) (#26127)

## Summary

Prefer `getChildrenAsJSX` or `toMatchRenderedOutput` over `getChildren`.
Use `dangerouslyGetChildren` if you really need to (e.g. for `toBe`
assertions).

Prefer `getPendingChildrenAsJSX` over `getPendingChildren`. Use
`dangerouslyGetPendingChildren` if you really need to (e.g. for `toBe`
assertions).

`ReactNoop.getChildren` contains the fibers as non-enumerable
properties. If you pass the children to `toEqual` and have a mismatch,
Jest performance is very poor (to the point of causing out-of-memory
crashes e.g.
https://app.circleci.com/pipelines/github/facebook/react/38084/workflows/02ca0cbb-bab4-4c19-8d7d-ada814eeebb9/jobs/624297/parallel-runs/5?filterBy=ALL&invite=true#step-106-27).
Mismatches can sometimes be intended e.g. on gated tests.

Instead, I converted almost all of the `toEqual` assertions to
`toMatchRenderedOutput` assertions or compare the JSX instead. For
ReactNoopPersistent we still use `getChildren` since we have assertions
on referential equality. `toMatchRenderedOutput` is more accurate in
some instances anyway. I highlighted some of those more accurate
assertions in review-comments.

## How did you test this change?

- [x] `CIRCLE_NODE_TOTAL=20 CIRCLE_NODE_INDEX=5 yarn test
-r=experimental --env=development --ci`: Can take up to 350s (and use up
to 7GB of memory) on `main` but 11s on this branch
- [x] No more slow `yarn test` parallel runs of `yarn_test` jobs (the
steps in these runs should take <1min but sometimes they take 3min and
end with OOM like
https://app.circleci.com/pipelines/github/facebook/react/38084/workflows/02ca0cbb-bab4-4c19-8d7d-ada814eeebb9/jobs/624258/parallel-runs/5?filterBy=ALL:
Looks good with a sample size of 1
https://app.circleci.com/pipelines/github/facebook/react/38110/workflows/745109a2-b86b-429f-8c01-9b23a245417a/jobs/624651
---
 packages/react-noop-renderer/src/ReactNoop.js |   2 +
 .../src/ReactNoopPersistent.js                |   2 +
 .../src/createReactNoop.js                    |  26 +-
 .../src/__tests__/ReactExpiration-test.js     |  24 +-
 .../src/__tests__/ReactFragment-test.js       | 164 +--
 .../ReactHooksWithNoopRenderer-test.js        | 427 ++++----
 ...tIncrementalErrorHandling-test.internal.js | 207 ++--
 .../ReactIncrementalScheduling-test.js        |  12 +-
 .../ReactIncrementalSideEffects-test.js       | 454 +++++----
 .../ReactIncrementalTriangle-test.js          |   5 +-
 .../__tests__/ReactIncrementalUpdates-test.js |  24 +-
 .../src/__tests__/ReactMemo-test.js           |  34 +-
 .../src/__tests__/ReactNewContext-test.js     | 180 ++--
 .../__tests__/ReactNoopRendererAct-test.js    |   2 +-
 .../src/__tests__/ReactPersistent-test.js     |  24 +-
 .../__tests__/ReactSuspenseCallback-test.js   |  25 +-
 .../ReactSuspenseEffectsSemantics-test.js     | 937 ++++++++++--------
 .../__tests__/ReactSuspenseFallback-test.js   |  16 +-
 .../ReactSuspenseWithNoopRenderer-test.js     | 514 ++++++----
 .../src/__tests__/useEffectEvent-test.js      | 278 +++---
 20 files changed, 1985 insertions(+), 1372 deletions(-)

diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index d25e2dcac7307..f7f750cd30652 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -20,7 +20,9 @@ import createReactNoop from './createReactNoop';
 export const {
   _Scheduler,
   getChildren,
+  dangerouslyGetChildren,
   getPendingChildren,
+  dangerouslyGetPendingChildren,
   getOrCreateRootContainer,
   createRoot,
   createLegacyRoot,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index 1a94a5a179cc2..c4bce280f216f 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -20,7 +20,9 @@ import createReactNoop from './createReactNoop';
 export const {
   _Scheduler,
   getChildren,
+  dangerouslyGetChildren,
   getPendingChildren,
+  dangerouslyGetPendingChildren,
   getOrCreateRootContainer,
   createRoot,
   createLegacyRoot,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 68d415a12aa71..c8ce26b4f6dc0 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -789,11 +789,35 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     _Scheduler: Scheduler,
 
     getChildren(rootID: string = DEFAULT_ROOT_ID) {
+      throw new Error(
+        'No longer supported due to bad performance when used with `expect()`. ' +
+          'Use `ReactNoop.getChildrenAsJSX()` instead or, if you really need to, `dangerouslyGetChildren` after you carefully considered the warning in its JSDOC.',
+      );
+    },
+
+    getPendingChildren(rootID: string = DEFAULT_ROOT_ID) {
+      throw new Error(
+        'No longer supported due to bad performance when used with `expect()`. ' +
+          'Use `ReactNoop.getPendingChildrenAsJSX()` instead or, if you really need to, `dangerouslyGetPendingChildren` after you carefully considered the warning in its JSDOC.',
+      );
+    },
+
+    /**
+     * Prefer using `getChildrenAsJSX`.
+     * Using the returned children in `.toEqual` has very poor performance on mismatch due to deep equality checking of fiber structures.
+     * Make sure you deeply remove enumerable properties before passing it to `.toEqual`, or, better, use `getChildrenAsJSX` or `toMatchRenderedOutput`.
+     */
+    dangerouslyGetChildren(rootID: string = DEFAULT_ROOT_ID) {
       const container = rootContainers.get(rootID);
       return getChildren(container);
     },
 
-    getPendingChildren(rootID: string = DEFAULT_ROOT_ID) {
+    /**
+     * Prefer using `getPendingChildrenAsJSX`.
+     * Using the returned children in `.toEqual` has very poor performance on mismatch due to deep equality checking of fiber structures.
+     * Make sure you deeply remove enumerable properties before passing it to `.toEqual`, or, better, use `getChildrenAsJSX` or `toMatchRenderedOutput`.
+     */
+    dangerouslyGetPendingChildren(rootID: string = DEFAULT_ROOT_ID) {
       const container = rootContainers.get(rootID);
       return getPendingChildren(container);
     },
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 72ca257fefa8d..7b96efc2b9f9e 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -105,10 +105,6 @@ describe('ReactExpiration', () => {
     }
   }
 
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
   function flushNextRenderIfExpired() {
     // This will start rendering the next level of work. If the work hasn't
     // expired yet, React will exit without doing anything. If it has expired,
@@ -127,21 +123,21 @@ describe('ReactExpiration', () => {
       ReactNoop.render(<span prop="done" />);
     }
 
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Nothing has expired yet because time hasn't advanced.
     flushNextRenderIfExpired();
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance time a bit, but not enough to expire the low pri update.
     ReactNoop.expire(4500);
     flushNextRenderIfExpired();
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance by another second. Now the update should expire and flush.
     ReactNoop.expire(500);
     flushNextRenderIfExpired();
-    expect(ReactNoop.getChildren()).toEqual([span('done')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="done" />);
   });
 
   it('two updates of like priority in the same event always flush within the same batch', () => {
@@ -181,20 +177,20 @@ describe('ReactExpiration', () => {
 
     // Don't advance time by enough to expire the first update.
     expect(Scheduler).toHaveYielded([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Schedule another update.
     ReactNoop.render(<TextClass text="B" />);
     // Both updates are batched
     expect(Scheduler).toFlushAndYield(['B [render]', 'B [commit]']);
-    expect(ReactNoop.getChildren()).toEqual([span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
 
     // Now do the same thing again, except this time don't flush any work in
     // between the two updates.
     ReactNoop.render(<TextClass text="A" />);
     Scheduler.unstable_advanceTime(2000);
     expect(Scheduler).toHaveYielded([]);
-    expect(ReactNoop.getChildren()).toEqual([span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
     // Schedule another update.
     ReactNoop.render(<TextClass text="B" />);
     // The updates should flush in the same batch, since as far as the scheduler
@@ -242,20 +238,20 @@ describe('ReactExpiration', () => {
 
       // Don't advance time by enough to expire the first update.
       expect(Scheduler).toHaveYielded([]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
 
       // Schedule another update.
       ReactNoop.render(<TextClass text="B" />);
       // Both updates are batched
       expect(Scheduler).toFlushAndYield(['B [render]', 'B [commit]']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
 
       // Now do the same thing again, except this time don't flush any work in
       // between the two updates.
       ReactNoop.render(<TextClass text="A" />);
       Scheduler.unstable_advanceTime(2000);
       expect(Scheduler).toHaveYielded([]);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
 
       // Perform some synchronous work. The scheduler must assume we're inside
       // the same event.
diff --git a/packages/react-reconciler/src/__tests__/ReactFragment-test.js b/packages/react-reconciler/src/__tests__/ReactFragment-test.js
index 423cee2ed3895..f56602881dfcc 100644
--- a/packages/react-reconciler/src/__tests__/ReactFragment-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFragment-test.js
@@ -22,21 +22,6 @@ describe('ReactFragment', () => {
     Scheduler = require('scheduler');
   });
 
-  function div(...children) {
-    children = children.map(c =>
-      typeof c === 'string' ? {text: c, hidden: false} : c,
-    );
-    return {type: 'div', children, prop: undefined, hidden: false};
-  }
-
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
-  function text(t) {
-    return {text: t, hidden: false};
-  }
-
   it('should render a single child via noop renderer', () => {
     const element = (
       <>
@@ -47,7 +32,7 @@ describe('ReactFragment', () => {
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
 
-    expect(ReactNoop.getChildren()).toEqual([span()]);
+    expect(ReactNoop).toMatchRenderedOutput(<span>foo</span>);
   });
 
   it('should render zero children via noop renderer', () => {
@@ -56,7 +41,7 @@ describe('ReactFragment', () => {
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
 
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   it('should render multiple children via noop renderer', () => {
@@ -69,7 +54,11 @@ describe('ReactFragment', () => {
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
 
-    expect(ReactNoop.getChildren()).toEqual([text('hello '), span()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        hello <span>world</span>
+      </>,
+    );
   });
 
   it('should render an iterable via noop renderer', () => {
@@ -80,7 +69,12 @@ describe('ReactFragment', () => {
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
 
-    expect(ReactNoop.getChildren()).toEqual([span(), span()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>hi</span>
+        <span>bye</span>
+      </>,
+    );
   });
 
   it('should preserve state of children with 1 level nesting', function () {
@@ -114,13 +108,18 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div(), div()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <div>World</div>
+      </>,
+    );
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should preserve state between top-level fragments', function () {
@@ -155,13 +154,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should preserve state of children nested at same level', function () {
@@ -205,13 +204,18 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div(), div()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div />
+        <div>Hello</div>
+      </>,
+    );
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state in non-top-level fragment nesting', function () {
@@ -248,13 +252,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state of children if nested 2 levels without siblings', function () {
@@ -289,13 +293,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state of children if nested 2 levels with siblings', function () {
@@ -331,13 +335,18 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div(), div()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <div />
+      </>,
+    );
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should preserve state between array nested in fragment and fragment', function () {
@@ -370,13 +379,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should preserve state between top level fragment and array', function () {
@@ -409,13 +418,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state between array nested in fragment and double nested fragment', function () {
@@ -450,13 +459,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state between array nested in fragment and double nested array', function () {
@@ -487,13 +496,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should preserve state between double nested fragment and double nested array', function () {
@@ -528,13 +537,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state of children when the keys are different', function () {
@@ -570,13 +579,18 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div(), span()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <span>World</span>
+      </>,
+    );
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state between unkeyed and keyed fragment', function () {
@@ -611,13 +625,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should preserve state with reordering in multiple levels', function () {
@@ -664,13 +678,29 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div(span(), div(div()), span())]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>beep</span>
+        <div>
+          <div>Hello</div>
+        </div>
+        <span>bar</span>
+      </div>,
+    );
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([div(span(), div(div()), span())]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>foo</span>
+        <div>
+          <div>Hello</div>
+        </div>
+        <span>boop</span>
+      </div>,
+    );
   });
 
   it('should not preserve state when switching to a keyed fragment to an array', function () {
@@ -713,13 +743,23 @@ describe('ReactFragment', () => {
     );
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div(div(), span())]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>Hello</div>
+        <span />
+      </div>,
+    );
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div(div(), span())]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>Hello</div>
+        <span />
+      </div>,
+    );
   });
 
   it('should not preserve state when switching a nested unkeyed fragment to a passthrough component', function () {
@@ -762,13 +802,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state when switching a nested keyed fragment to a passthrough component', function () {
@@ -811,13 +851,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should not preserve state when switching a nested keyed array to a passthrough component', function () {
@@ -856,13 +896,13 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo condition={true} />);
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual([]);
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
   });
 
   it('should preserve state when it does not change positions', function () {
@@ -904,13 +944,23 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([span(), div()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span />
+        <div>Hello</div>
+      </>,
+    );
 
     ReactNoop.render(<Foo condition={true} />);
     // The key warning gets deduped because it's in the same component.
     expect(Scheduler).toFlushWithoutYielding();
 
     expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
-    expect(ReactNoop.getChildren()).toEqual([span(), div()]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span />
+        <div>Hello</div>
+      </>,
+    );
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 417077c8179f5..2455f51965c21 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -113,10 +113,6 @@ describe('ReactHooksWithNoopRenderer', () => {
     };
   });
 
-  function span(prop) {
-    return {type: 'span', hidden: false, children: [], prop};
-  }
-
   function Text(props) {
     Scheduler.unstable_yieldValue(props.text);
     return <span prop={props.text} />;
@@ -167,7 +163,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     const counter = React.createRef(null);
     ReactNoop.render(<Counter label="Count" ref={counter} />);
     expect(Scheduler).toFlushAndYield(['Count: 0']);
-    expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
     // Schedule some updates
     act(() => {
@@ -183,7 +179,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       // Partially flush without committing
       expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       // Interrupt with a high priority update
       ReactNoop.flushSync(() => {
@@ -193,7 +189,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       // Resume rendering
       expect(Scheduler).toFlushAndYield(['Total: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Total: 11')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Total: 11" />);
     });
   });
 
@@ -289,15 +285,15 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       act(() => counter.current.updateCount(1));
       expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
 
       act(() => counter.current.updateCount(count => count + 10));
       expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 11" />);
     });
 
     it('lazy state initializer', () => {
@@ -313,11 +309,11 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter initialState={42} ref={counter} />);
       expect(Scheduler).toFlushAndYield(['getInitialState', 'Count: 42']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 42')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 42" />);
 
       act(() => counter.current.updateCount(7));
       expect(Scheduler).toHaveYielded(['Count: 7']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 7')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 7" />);
     });
 
     it('multiple states', () => {
@@ -331,7 +327,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       act(() => counter.current.updateCount(7));
       expect(Scheduler).toHaveYielded(['Count: 7']);
@@ -349,19 +345,19 @@ describe('ReactHooksWithNoopRenderer', () => {
       }
       ReactNoop.render(<Counter />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       const firstUpdater = updater;
 
       act(() => firstUpdater(1));
       expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
 
       const secondUpdater = updater;
 
       act(() => firstUpdater(count => count + 10));
       expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 11" />);
 
       expect(firstUpdater).toBe(secondUpdater);
     });
@@ -392,15 +388,15 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       ReactNoop.render(<Counter />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       ReactNoop.render(<Counter />);
       expect(Scheduler).toFlushAndYield([]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       act(() => _updateCount(1));
       expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
     });
   });
 
@@ -421,27 +417,39 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       ReactNoop.render(<ScrollView row={1} />);
       expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: false')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: false" />,
+      );
 
       ReactNoop.render(<ScrollView row={5} />);
       expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: true')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: true" />,
+      );
 
       ReactNoop.render(<ScrollView row={5} />);
       expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: true')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: true" />,
+      );
 
       ReactNoop.render(<ScrollView row={10} />);
       expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: true')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: true" />,
+      );
 
       ReactNoop.render(<ScrollView row={2} />);
       expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: false')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: false" />,
+      );
 
       ReactNoop.render(<ScrollView row={2} />);
       expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: false')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: false" />,
+      );
     });
 
     it('warns about render phase update on a different component', async () => {
@@ -517,7 +525,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Render: 3',
         3,
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span(3)]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
     });
 
     it('updates multiple times within same render function', () => {
@@ -542,7 +550,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Render: 12',
         12,
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span(12)]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={12} />);
     });
 
     it('throws after too many iterations', () => {
@@ -580,7 +588,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Render: 3',
         3,
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span(3)]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
     });
 
     it('uses reducer passed at time of render, not time of dispatch', () => {
@@ -632,7 +640,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Render: 21',
         21,
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span(21)]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={21} />);
 
       // Test that it works on update, too. This time the log is a bit different
       // because we started with reducerB instead of reducerA.
@@ -648,7 +656,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Render: 22',
         22,
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span(22)]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={22} />);
     });
 
     it('discards render phase updates if something suspends', async () => {
@@ -873,11 +881,11 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       act(() => counter.current.dispatch(INCREMENT));
       expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       act(() => {
         counter.current.dispatch(DECREMENT);
         counter.current.dispatch(DECREMENT);
@@ -885,7 +893,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       expect(Scheduler).toHaveYielded(['Count: -2']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: -2')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: -2" />);
     });
 
     it('lazy init', () => {
@@ -915,11 +923,11 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter initialCount={10} ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Init', 'Count: 10']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 10')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 10" />);
 
       act(() => counter.current.dispatch(INCREMENT));
       expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 11" />);
 
       act(() => {
         counter.current.dispatch(DECREMENT);
@@ -928,7 +936,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       expect(Scheduler).toHaveYielded(['Count: 8']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 8')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 8" />);
     });
 
     // Regression test for https://github.com/facebook/react/issues/14360
@@ -950,7 +958,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       ReactNoop.render(<Counter ref={counter} />);
 
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       ReactNoop.batchedUpdates(() => {
         counter.current.dispatch(INCREMENT);
@@ -963,12 +971,12 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
       if (gate(flags => flags.enableUnifiedSyncLane)) {
         expect(Scheduler).toHaveYielded(['Count: 4']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 4')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 4" />);
       } else {
         expect(Scheduler).toHaveYielded(['Count: 1']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
         expect(Scheduler).toFlushAndYield(['Count: 4']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 4')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 4" />);
       }
     });
   });
@@ -986,7 +994,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
         // Effects are deferred until after the commit
         expect(Scheduler).toFlushAndYield(['Passive effect [0]']);
       });
@@ -996,7 +1004,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
         // Effects are deferred until after the commit
         expect(Scheduler).toFlushAndYield(['Passive effect [1]']);
       });
@@ -1023,15 +1031,17 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Passive',
           'Layout effect',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Layout'),
-          span('Passive'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Layout" />
+            <span prop="Passive" />
+          </>,
+        );
         // Destroying the first child shouldn't prevent the passive effect from
         // being executed
         ReactNoop.render([passive]);
         expect(Scheduler).toFlushAndYield(['Passive effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Passive')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Passive" />);
       });
       // exiting act calls flushPassiveEffects(), but there are none left to flush.
       expect(Scheduler).toHaveYielded([]);
@@ -1069,10 +1079,12 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Passive'),
-        span('Layout'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Passive" />
+          <span prop="Layout" />
+        </>,
+      );
     });
 
     it('flushes passive effects even if siblings schedule a new root', () => {
@@ -1099,10 +1111,12 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Passive effect',
           'New Root',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Passive'),
-          span('Layout'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Passive" />
+            <span prop="Layout" />
+          </>,
+        );
       });
     });
 
@@ -1111,11 +1125,11 @@ describe('ReactHooksWithNoopRenderer', () => {
         "new ones, if they haven't already fired",
       () => {
         function getCommittedText() {
-          const children = ReactNoop.getChildren();
+          const children = ReactNoop.getChildrenAsJSX();
           if (children === null) {
             return null;
           }
-          return children[0].prop;
+          return children.props.prop;
         }
 
         function Counter(props) {
@@ -1131,7 +1145,7 @@ describe('ReactHooksWithNoopRenderer', () => {
             Scheduler.unstable_yieldValue('Sync effect'),
           );
           expect(Scheduler).toFlushAndYieldThrough([0, 'Sync effect']);
-          expect(ReactNoop.getChildren()).toEqual([span(0)]);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
           // Before the effects have a chance to flush, schedule another update
           ReactNoop.render(<Counter count={1} />, () =>
             Scheduler.unstable_yieldValue('Sync effect'),
@@ -1142,7 +1156,7 @@ describe('ReactHooksWithNoopRenderer', () => {
             1,
             'Sync effect',
           ]);
-          expect(ReactNoop.getChildren()).toEqual([span(1)]);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
         });
 
         expect(Scheduler).toHaveYielded([
@@ -1622,7 +1636,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Count: (empty)',
           'Sync effect',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: (empty)" />);
         ReactNoop.flushPassiveEffects();
         expect(Scheduler).toHaveYielded(['Schedule update [0]']);
         expect(Scheduler).toFlushAndYield(['Count: 0']);
@@ -1633,7 +1647,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
         ReactNoop.flushPassiveEffects();
         expect(Scheduler).toHaveYielded(['Schedule update [1]']);
         expect(Scheduler).toFlushAndYield(['Count: 1']);
@@ -1657,7 +1671,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Count: (empty)',
           'Sync effect',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: (empty)" />);
 
         // Rendering again should flush the previous commit's effects
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
@@ -1678,7 +1692,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
 
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
           expect(Scheduler).toFlushAndYieldThrough([
             'Count: 0',
             'Sync effect',
@@ -1686,16 +1700,18 @@ describe('ReactHooksWithNoopRenderer', () => {
             'Count: 1',
           ]);
         } else {
-          expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <span prop="Count: (empty)" />,
+          );
           expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
-          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
           ReactNoop.flushPassiveEffects();
           expect(Scheduler).toHaveYielded(['Schedule update [1]']);
           expect(Scheduler).toFlushAndYield(['Count: 1']);
         }
 
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
     });
 
@@ -1715,7 +1731,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         Scheduler.unstable_yieldValue('Sync effect'),
       );
       expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       // A flush sync doesn't cause the passive effects to fire.
       // So we haven't added the other update yet.
       act(() => {
@@ -1737,7 +1753,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       }
 
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
     });
 
     it(
@@ -1765,14 +1781,16 @@ describe('ReactHooksWithNoopRenderer', () => {
 
           // Even in legacy mode, effects are deferred until after paint
           expect(Scheduler).toHaveYielded(['Count: (empty)']);
-          expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <span prop="Count: (empty)" />,
+          );
         });
 
         // effects get forced on exiting act()
         // There were multiple updates, but there should only be a
         // single render
         expect(Scheduler).toHaveYielded(['Count: 0']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       },
     );
 
@@ -1784,10 +1802,11 @@ describe('ReactHooksWithNoopRenderer', () => {
           ReactNoop.flushSync(() => {
             updateCount(props.count);
           });
+          expect(Scheduler).toHaveYielded([`Schedule update [${props.count}]`]);
           // This shouldn't flush synchronously.
-          expect(ReactNoop.getChildren()).not.toEqual([
-            span('Count: ' + props.count),
-          ]);
+          expect(ReactNoop).not.toMatchRenderedOutput(
+            <span prop={`Count: ${props.count}`} />,
+          );
         }, [props.count]);
         return <Text text={'Count: ' + count} />;
       }
@@ -1800,10 +1819,13 @@ describe('ReactHooksWithNoopRenderer', () => {
             'Count: (empty)',
             'Sync effect',
           ]);
-          expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <span prop="Count: (empty)" />,
+          );
         });
       }).toErrorDev('flushSync was called from inside a lifecycle method');
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(Scheduler).toHaveYielded([`Count: 0`]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
     });
 
     it('unmounts previous effect', () => {
@@ -1821,7 +1843,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       });
 
       expect(Scheduler).toHaveYielded(['Did create [0]']);
@@ -1831,7 +1853,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
 
       expect(Scheduler).toHaveYielded(['Did destroy [0]', 'Did create [1]']);
@@ -1852,14 +1874,14 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       });
 
       expect(Scheduler).toHaveYielded(['Did create [0]']);
 
       ReactNoop.render(null);
       expect(Scheduler).toFlushAndYield(['Did destroy [0]']);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     it('unmounts on deletion after skipped effect', () => {
@@ -1877,7 +1899,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       });
 
       expect(Scheduler).toHaveYielded(['Did create [0]']);
@@ -1887,14 +1909,14 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
 
       expect(Scheduler).toHaveYielded([]);
 
       ReactNoop.render(null);
       expect(Scheduler).toFlushAndYield(['Did destroy [0]']);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     it('always fires effects if no dependencies are provided', () => {
@@ -1913,7 +1935,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       });
 
       expect(Scheduler).toHaveYielded(['Did create']);
@@ -1923,14 +1945,14 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
 
       expect(Scheduler).toHaveYielded(['Did destroy', 'Did create']);
 
       ReactNoop.render(null);
       expect(Scheduler).toFlushAndYield(['Did destroy']);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     it('skips effect if inputs have not changed', () => {
@@ -1952,7 +1974,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       expect(Scheduler).toHaveYielded(['Did create [Count: 0]']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       act(() => {
         ReactNoop.render(<Counter label="Count" count={1} />, () =>
@@ -1960,7 +1982,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         );
         // Count changed
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
 
       expect(Scheduler).toHaveYielded([
@@ -1977,7 +1999,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       expect(Scheduler).toHaveYielded([]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
 
       act(() => {
         ReactNoop.render(<Counter label="Total" count={1} />, () =>
@@ -1985,7 +2007,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         );
         // Label changed
         expect(Scheduler).toFlushAndYieldThrough(['Total: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Total: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Total: 1" />);
       });
 
       expect(Scheduler).toHaveYielded([
@@ -2009,7 +2031,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       });
 
       expect(Scheduler).toHaveYielded(['Did commit 1 [0]', 'Did commit 2 [0]']);
@@ -2019,7 +2041,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
       expect(Scheduler).toHaveYielded(['Did commit 1 [1]', 'Did commit 2 [1]']);
     });
@@ -2045,7 +2067,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       });
 
       expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
@@ -2055,7 +2077,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
       expect(Scheduler).toHaveYielded([
         'Unmount A [0]',
@@ -2084,7 +2106,12 @@ describe('ReactHooksWithNoopRenderer', () => {
           () => Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['A 0', 'B 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('A 0'), span('B 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A 0" />
+            <span prop="B 0" />
+          </>,
+        );
       });
 
       expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
@@ -2098,7 +2125,12 @@ describe('ReactHooksWithNoopRenderer', () => {
           () => Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['A 1', 'B 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('A 1'), span('B 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A 1" />
+            <span prop="B 1" />
+          </>,
+        );
       });
       expect(Scheduler).toHaveYielded([
         'Unmount A [0]',
@@ -2116,7 +2148,12 @@ describe('ReactHooksWithNoopRenderer', () => {
           () => Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['B 2', 'C 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('B 2'), span('C 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="B 2" />
+            <span prop="C 0" />
+          </>,
+        );
       });
       expect(Scheduler).toHaveYielded([
         'Unmount A [1]',
@@ -2150,7 +2187,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
         expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
       });
 
@@ -2161,7 +2198,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         // never mounted.
         'Unmount A [0]',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     it('handles errors in create on update', () => {
@@ -2189,7 +2226,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
         ReactNoop.flushPassiveEffects();
         expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
       });
@@ -2200,7 +2237,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
         expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
         expect(Scheduler).toHaveYielded([
           'Unmount A [0]',
@@ -2208,7 +2245,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Mount A [1]',
           'Oops!',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([]);
+        expect(ReactNoop).toMatchRenderedOutput(null);
       });
       expect(Scheduler).toHaveYielded([
         // Clean up effect A runs passively on unmount.
@@ -2242,7 +2279,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
         ReactNoop.flushPassiveEffects();
         expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
       });
@@ -2253,7 +2290,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue('Sync effect'),
         );
         expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
         expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
 
         // This branch enables a feature flag that flushes all passive destroys in a
@@ -2272,7 +2309,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       // The remaining destroy functions are run later on unmount, since they're passive.
       // In this case, one of them throws again (because of how the test is written).
       expect(Scheduler).toHaveYielded(['Oops!', 'Unmount B [1]']);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     it('works with memo', () => {
@@ -2293,7 +2330,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Mount: 0',
         'Sync effect',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
       ReactNoop.render(<Counter count={1} />, () =>
         Scheduler.unstable_yieldValue('Sync effect'),
@@ -2304,11 +2341,11 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Mount: 1',
         'Sync effect',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
 
       ReactNoop.render(null);
       expect(Scheduler).toFlushAndYieldThrough(['Unmount: 1']);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     describe('errors thrown in passive destroy function within unmounted trees', () => {
@@ -2473,9 +2510,9 @@ describe('ReactHooksWithNoopRenderer', () => {
           'ErrorBoundary componentDidCatch',
         ]);
 
-        expect(ReactNoop.getChildren()).toEqual([
-          span('ErrorBoundary fallback'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="ErrorBoundary fallback" />,
+        );
       });
 
       // @gate skipUnmountedBoundaries
@@ -2511,7 +2548,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           'BrokenUseEffectCleanup useEffect destroy',
         ]);
 
-        expect(ReactNoop.getChildren()).toEqual([]);
+        expect(ReactNoop).toMatchRenderedOutput(null);
       });
     });
 
@@ -3191,12 +3228,12 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('fires layout effects after the host has been mutated', () => {
       function getCommittedText() {
         const yields = Scheduler.unstable_clearYields();
-        const children = ReactNoop.getChildren();
+        const children = ReactNoop.getChildrenAsJSX();
         Scheduler.unstable_yieldValue(yields);
         if (children === null) {
           return null;
         }
-        return children[0].prop;
+        return children.props.prop;
       }
 
       function Counter(props) {
@@ -3214,7 +3251,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Current: 0',
         'Sync effect',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span(0)]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
 
       ReactNoop.render(<Counter count={1} />, () =>
         Scheduler.unstable_yieldValue('Sync effect'),
@@ -3224,7 +3261,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Current: 1',
         'Sync effect',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span(1)]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
     });
 
     it('force flushes passive effects before firing new layout effects', () => {
@@ -3341,10 +3378,12 @@ describe('ReactHooksWithNoopRenderer', () => {
         'InnerBoundary render success',
         'BrokenLayoutEffectDestroy render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('sibling'),
-        span('broken'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="sibling" />
+          <span prop="broken" />
+        </>,
+      );
 
       ReactNoop.render(
         <ErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
@@ -3361,7 +3400,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         'OuterBoundary render error',
         'Component render OuterFallback',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('OuterFallback')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="OuterFallback" />);
     });
 
     it('assumes layout effect destroy function is either a function or undefined', () => {
@@ -3441,10 +3480,12 @@ describe('ReactHooksWithNoopRenderer', () => {
       const button = React.createRef(null);
       ReactNoop.render(<Counter incrementBy={1} />);
       expect(Scheduler).toFlushAndYield(['Increment', 'Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 0'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 0" />
+        </>,
+      );
 
       act(button.current.increment);
       expect(Scheduler).toHaveYielded([
@@ -3452,10 +3493,12 @@ describe('ReactHooksWithNoopRenderer', () => {
         // 'Increment',
         'Count: 1',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 1'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 1" />
+        </>,
+      );
 
       // Increase the increment amount
       ReactNoop.render(<Counter incrementBy={10} />);
@@ -3464,18 +3507,22 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Increment',
         'Count: 1',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 1'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 1" />
+        </>,
+      );
 
       // Callback should have updated
       act(button.current.increment);
       expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 11'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 11" />
+        </>,
+      );
     });
   });
 
@@ -3492,19 +3539,19 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       ReactNoop.render(<CapitalizedText text="hello" />);
       expect(Scheduler).toFlushAndYield(["Capitalize 'hello'", 'HELLO']);
-      expect(ReactNoop.getChildren()).toEqual([span('HELLO')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="HELLO" />);
 
       ReactNoop.render(<CapitalizedText text="hi" />);
       expect(Scheduler).toFlushAndYield(["Capitalize 'hi'", 'HI']);
-      expect(ReactNoop.getChildren()).toEqual([span('HI')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="HI" />);
 
       ReactNoop.render(<CapitalizedText text="hi" />);
       expect(Scheduler).toFlushAndYield(['HI']);
-      expect(ReactNoop.getChildren()).toEqual([span('HI')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="HI" />);
 
       ReactNoop.render(<CapitalizedText text="goodbye" />);
       expect(Scheduler).toFlushAndYield(["Capitalize 'goodbye'", 'GOODBYE']);
-      expect(ReactNoop.getChildren()).toEqual([span('GOODBYE')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="GOODBYE" />);
     });
 
     it('always re-computes if no inputs are provided', () => {
@@ -3583,14 +3630,14 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       expect(counter.current.count).toBe(0);
 
       act(() => {
         counter.current.dispatch(INCREMENT);
       });
       expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       // Intentionally not updated because of [] deps:
       expect(counter.current.count).toBe(0);
     });
@@ -3613,14 +3660,14 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       expect(counter.current.count).toBe(0);
 
       act(() => {
         counter.current.dispatch(INCREMENT);
       });
       expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       expect(counter.current.count).toBe(1);
     });
 
@@ -3649,7 +3696,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       const counter = React.createRef(null);
       ReactNoop.render(<Counter ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
       expect(counter.current.count).toBe(0);
       expect(totalRefUpdates).toBe(1);
 
@@ -3657,14 +3704,14 @@ describe('ReactHooksWithNoopRenderer', () => {
         counter.current.dispatch(INCREMENT);
       });
       expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       expect(counter.current.count).toBe(1);
       expect(totalRefUpdates).toBe(2);
 
       // Update that doesn't change the ref dependencies
       ReactNoop.render(<Counter ref={counter} />);
       expect(Scheduler).toFlushAndYield(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       expect(counter.current.count).toBe(1);
       expect(totalRefUpdates).toBe(2); // Should not increase since last time
     });
@@ -3694,9 +3741,9 @@ describe('ReactHooksWithNoopRenderer', () => {
       }
       ReactNoop.render(<App />);
       expect(Scheduler).toFlushAndYield(['Before... Pending: false']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Before... Pending: false'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Before... Pending: false" />,
+      );
 
       await act(async () => {
         transition();
@@ -3706,27 +3753,27 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Suspend! [After... Pending: false]',
           'Loading... Pending: false',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: true'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Before... Pending: true" />,
+        );
         Scheduler.unstable_advanceTime(500);
         await advanceTimers(500);
 
         // Even after a long amount of time, we still don't show a placeholder.
         Scheduler.unstable_advanceTime(100000);
         await advanceTimers(100000);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: true'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Before... Pending: true" />,
+        );
 
         await resolveText('After... Pending: false');
         expect(Scheduler).toHaveYielded([
           'Promise resolved [After... Pending: false]',
         ]);
         expect(Scheduler).toFlushAndYield(['After... Pending: false']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('After... Pending: false'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="After... Pending: false" />,
+        );
       });
     });
   });
@@ -3759,12 +3806,22 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       expect(Scheduler).toHaveYielded(['A', 'Suspend! [A]', 'Loading']);
-      expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="Loading" />
+        </>,
+      );
 
       await resolveText('A');
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A'), span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="A" />
+        </>,
+      );
 
       await act(async () => {
         _setText('B');
@@ -3776,7 +3833,12 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Loading',
         ]);
         expect(Scheduler).toFlushAndYield([]);
-        expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="B" />
+            <span prop="A" />
+          </>,
+        );
       });
 
       await act(async () => {
@@ -3784,19 +3846,34 @@ describe('ReactHooksWithNoopRenderer', () => {
         await advanceTimers(250);
       });
       expect(Scheduler).toHaveYielded([]);
-      expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="B" />
+          <span prop="A" />
+        </>,
+      );
 
       // Even after a long amount of time, we don't show a fallback
       Scheduler.unstable_advanceTime(100000);
       await advanceTimers(100000);
       expect(Scheduler).toFlushAndYield([]);
-      expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="B" />
+          <span prop="A" />
+        </>,
+      );
 
       await act(async () => {
         await resolveText('B');
       });
       expect(Scheduler).toHaveYielded(['Promise resolved [B]', 'B', 'B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B'), span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="B" />
+          <span prop="B" />
+        </>,
+      );
     });
   });
 
@@ -3824,9 +3901,9 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       ReactNoop.render(<App loadC={false} />);
       expect(Scheduler).toFlushAndYield(['A: 0, B: 0, C: [not loaded]']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('A: 0, B: 0, C: [not loaded]'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="A: 0, B: 0, C: [not loaded]" />,
+      );
 
       act(() => {
         updateA(2);
@@ -3834,9 +3911,9 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       expect(Scheduler).toHaveYielded(['A: 2, B: 3, C: [not loaded]']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('A: 2, B: 3, C: [not loaded]'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="A: 2, B: 3, C: [not loaded]" />,
+      );
 
       ReactNoop.render(<App loadC={true} />);
       expect(() => {
@@ -3856,11 +3933,11 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
 
       // Uncomment if/when we support this again
-      // expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 0')]);
+      // expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 2, B: 3, C: 0" />]);
 
       // updateC(4);
       // expect(Scheduler).toFlushAndYield(['A: 2, B: 3, C: 4']);
-      // expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 4')]);
+      // expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 2, B: 3, C: 4" />]);
     });
 
     it('unmount state', () => {
@@ -3888,14 +3965,14 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       ReactNoop.render(<App loadC={true} />);
       expect(Scheduler).toFlushAndYield(['A: 0, B: 0, C: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('A: 0, B: 0, C: 0')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 0, B: 0, C: 0" />);
       act(() => {
         updateA(2);
         updateB(3);
         updateC(4);
       });
       expect(Scheduler).toHaveYielded(['A: 2, B: 3, C: 4']);
-      expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 4')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 2, B: 3, C: 4" />);
       ReactNoop.render(<App loadC={false} />);
       expect(Scheduler).toFlushAndThrow(
         'Rendered fewer hooks than expected. This may be caused by an ' +
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 80f1779e119a4..37869121ba17c 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -29,15 +29,6 @@ describe('ReactIncrementalErrorHandling', () => {
     act = require('jest-react').act;
   });
 
-  function div(...children) {
-    children = children.map(c => (typeof c === 'string' ? {text: c} : c));
-    return {type: 'div', children, prop: undefined, hidden: false};
-  }
-
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
   function normalizeCodeLocInfo(str) {
     return (
       str &&
@@ -149,7 +140,7 @@ describe('ReactIncrementalErrorHandling', () => {
 
     // Since the error was thrown during an async render, React won't commit
     // the result yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Instead, it will try rendering one more time, synchronously, in case that
     // happens to fix the error.
@@ -169,7 +160,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'ErrorMessage',
     ]);
 
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
   });
 
   it('recovers from errors asynchronously (legacy, no getDerivedStateFromError)', () => {
@@ -267,7 +260,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'ErrorBoundary (catch)',
       'ErrorMessage',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
   });
 
   it("retries at a lower priority if there's additional pending work", async () => {
@@ -307,7 +302,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'commit',
       'commit',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Everything is fine.')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Everything is fine." />,
+    );
   });
 
   // @gate www
@@ -424,7 +421,7 @@ describe('ReactIncrementalErrorHandling', () => {
       'Sibling',
       'commit',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   it('retries one more time if an error occurs during a render that expires midway through the tree', async () => {
@@ -484,7 +481,7 @@ describe('ReactIncrementalErrorHandling', () => {
       'C',
       'D',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   it('calls componentDidCatch multiple times for multiple errors', () => {
@@ -531,7 +528,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'componentDidCatch: Error 2',
       'componentDidCatch: Error 3',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Number of errors: 3')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Number of errors: 3" />,
+    );
   });
 
   it('catches render error in a boundary during full deferred mounting', () => {
@@ -560,7 +559,9 @@ describe('ReactIncrementalErrorHandling', () => {
       </ErrorBoundary>,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
   });
 
   it('catches render error in a boundary during partial deferred mounting', () => {
@@ -604,7 +605,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     expect(Scheduler).toFlushAndYieldThrough(['ErrorBoundary render success']);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     expect(Scheduler).toFlushAndYield([
       'BrokenRender',
@@ -616,7 +617,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'ErrorBoundary componentDidCatch',
       'ErrorBoundary render error',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
   });
 
   it('catches render error in a boundary during synchronous mounting', () => {
@@ -663,7 +666,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'ErrorBoundary componentDidCatch',
       'ErrorBoundary render error',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
   });
 
   it('catches render error in a boundary during batched mounting', () => {
@@ -711,7 +716,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'ErrorBoundary componentDidCatch',
       'ErrorBoundary render error',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
   });
 
   it('propagates an error from a noop error boundary during full deferred mounting', () => {
@@ -750,7 +757,7 @@ describe('ReactIncrementalErrorHandling', () => {
         'RethrowErrorBoundary componentDidCatch',
       ]);
     }).toThrow('Hello');
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(null);
   });
 
   it('propagates an error from a noop error boundary during partial deferred mounting', () => {
@@ -801,7 +808,7 @@ describe('ReactIncrementalErrorHandling', () => {
       // Errored again on retry. Now handle it.
       'RethrowErrorBoundary componentDidCatch',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   it('propagates an error from a noop error boundary during synchronous mounting', () => {
@@ -841,7 +848,7 @@ describe('ReactIncrementalErrorHandling', () => {
       // Errored again on retry. Now handle it.
       'RethrowErrorBoundary componentDidCatch',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   it('propagates an error from a noop error boundary during batched mounting', () => {
@@ -884,7 +891,7 @@ describe('ReactIncrementalErrorHandling', () => {
       // Errored again on retry. Now handle it.
       'RethrowErrorBoundary componentDidCatch',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   it('applies batched updates regardless despite errors in scheduling', () => {
@@ -897,7 +904,7 @@ describe('ReactIncrementalErrorHandling', () => {
       });
     }).toThrow('Hello');
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('a:3')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a:3" />);
   });
 
   it('applies nested batched updates despite errors in scheduling', () => {
@@ -914,7 +921,7 @@ describe('ReactIncrementalErrorHandling', () => {
       });
     }).toThrow('Hello');
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('a:5')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a:5" />);
   });
 
   // TODO: Is this a breaking change?
@@ -930,7 +937,7 @@ describe('ReactIncrementalErrorHandling', () => {
       });
     }).toThrow('Hello');
     Scheduler.unstable_flushAll();
-    expect(ReactNoop.getChildren()).toEqual([span('a:3')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a:3" />);
   });
 
   it('can schedule updates after uncaught error in render on mount', () => {
@@ -1127,11 +1134,11 @@ describe('ReactIncrementalErrorHandling', () => {
     );
     ReactNoop.renderToRootWithID(<span prop="b:1" />, 'b');
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren('a')).toEqual([
-      span('Caught an error: Hello.'),
-    ]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(
+      <span prop="Caught an error: Hello." />,
+    );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren('b')).toEqual([span('b:1')]);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:1" />);
   });
 
   it('continues work on other roots despite uncaught errors', () => {
@@ -1143,7 +1150,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(() => {
       expect(Scheduler).toFlushWithoutYielding();
     }).toThrow('a');
-    expect(ReactNoop.getChildren('a')).toEqual([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
 
     ReactNoop.renderToRootWithID(<BrokenRender label="a" />, 'a');
     ReactNoop.renderToRootWithID(<span prop="b:2" />, 'b');
@@ -1152,16 +1159,16 @@ describe('ReactIncrementalErrorHandling', () => {
     }).toThrow('a');
 
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren('a')).toEqual([]);
-    expect(ReactNoop.getChildren('b')).toEqual([span('b:2')]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:2" />);
 
     ReactNoop.renderToRootWithID(<span prop="a:3" />, 'a');
     ReactNoop.renderToRootWithID(<BrokenRender label="b" />, 'b');
     expect(() => {
       expect(Scheduler).toFlushWithoutYielding();
     }).toThrow('b');
-    expect(ReactNoop.getChildren('a')).toEqual([span('a:3')]);
-    expect(ReactNoop.getChildren('b')).toEqual([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:3" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(null);
 
     ReactNoop.renderToRootWithID(<span prop="a:4" />, 'a');
     ReactNoop.renderToRootWithID(<BrokenRender label="b" />, 'b');
@@ -1170,9 +1177,9 @@ describe('ReactIncrementalErrorHandling', () => {
       expect(Scheduler).toFlushWithoutYielding();
     }).toThrow('b');
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren('a')).toEqual([span('a:4')]);
-    expect(ReactNoop.getChildren('b')).toEqual([]);
-    expect(ReactNoop.getChildren('c')).toEqual([span('c:4')]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:4" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(<span prop="c:4" />);
 
     ReactNoop.renderToRootWithID(<span prop="a:5" />, 'a');
     ReactNoop.renderToRootWithID(<span prop="b:5" />, 'b');
@@ -1183,11 +1190,11 @@ describe('ReactIncrementalErrorHandling', () => {
       expect(Scheduler).toFlushWithoutYielding();
     }).toThrow('e');
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren('a')).toEqual([span('a:5')]);
-    expect(ReactNoop.getChildren('b')).toEqual([span('b:5')]);
-    expect(ReactNoop.getChildren('c')).toEqual([span('c:5')]);
-    expect(ReactNoop.getChildren('d')).toEqual([span('d:5')]);
-    expect(ReactNoop.getChildren('e')).toEqual([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:5" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:5" />);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(<span prop="c:5" />);
+    expect(ReactNoop.getChildrenAsJSX('d')).toEqual(<span prop="d:5" />);
+    expect(ReactNoop.getChildrenAsJSX('e')).toEqual(null);
 
     ReactNoop.renderToRootWithID(<BrokenRender label="a" />, 'a');
     ReactNoop.renderToRootWithID(<span prop="b:6" />, 'b');
@@ -1207,12 +1214,12 @@ describe('ReactIncrementalErrorHandling', () => {
     }).toThrow('e');
 
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren('a')).toEqual([]);
-    expect(ReactNoop.getChildren('b')).toEqual([span('b:6')]);
-    expect(ReactNoop.getChildren('c')).toEqual([]);
-    expect(ReactNoop.getChildren('d')).toEqual([span('d:6')]);
-    expect(ReactNoop.getChildren('e')).toEqual([]);
-    expect(ReactNoop.getChildren('f')).toEqual([span('f:6')]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:6" />);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('d')).toEqual(<span prop="d:6" />);
+    expect(ReactNoop.getChildrenAsJSX('e')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('f')).toEqual(<span prop="f:6" />);
 
     ReactNoop.unmountRootWithID('a');
     ReactNoop.unmountRootWithID('b');
@@ -1221,12 +1228,12 @@ describe('ReactIncrementalErrorHandling', () => {
     ReactNoop.unmountRootWithID('e');
     ReactNoop.unmountRootWithID('f');
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren('a')).toEqual(null);
-    expect(ReactNoop.getChildren('b')).toEqual(null);
-    expect(ReactNoop.getChildren('c')).toEqual(null);
-    expect(ReactNoop.getChildren('d')).toEqual(null);
-    expect(ReactNoop.getChildren('e')).toEqual(null);
-    expect(ReactNoop.getChildren('f')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('d')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('e')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('f')).toEqual(null);
   });
 
   it('unwinds the context stack correctly on error', () => {
@@ -1284,7 +1291,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     // If the context stack does not unwind, span will get 'abcde'
-    expect(ReactNoop.getChildren()).toEqual([span('a')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a" />);
   });
 
   it('catches reconciler errors in a boundary during mounting', () => {
@@ -1315,17 +1322,19 @@ describe('ReactIncrementalErrorHandling', () => {
       // React retries once on error
       'Warning: React.createElement: type is invalid -- expected a string',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span(
-        'Element type is invalid: expected a string (for built-in components) or ' +
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Element type is invalid: expected a string (for built-in components) or ' +
           'a class/function (for composite components) but got: undefined.' +
           (__DEV__
             ? " You likely forgot to export your component from the file it's " +
               'defined in, or you might have mixed up default and named imports.' +
               '\n\nCheck the render method of `BrokenRender`.'
-            : ''),
-      ),
-    ]);
+            : '')
+        }
+      />,
+    );
   });
 
   it('catches reconciler errors in a boundary during update', () => {
@@ -1364,17 +1373,19 @@ describe('ReactIncrementalErrorHandling', () => {
       // React retries once on error
       'Warning: React.createElement: type is invalid -- expected a string',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span(
-        'Element type is invalid: expected a string (for built-in components) or ' +
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Element type is invalid: expected a string (for built-in components) or ' +
           'a class/function (for composite components) but got: undefined.' +
           (__DEV__
             ? " You likely forgot to export your component from the file it's " +
               'defined in, or you might have mixed up default and named imports.' +
               '\n\nCheck the render method of `BrokenRender`.'
-            : ''),
-      ),
-    ]);
+            : '')
+        }
+      />,
+    );
   });
 
   it('recovers from uncaught reconciler errors', () => {
@@ -1394,7 +1405,7 @@ describe('ReactIncrementalErrorHandling', () => {
 
     ReactNoop.render(<span prop="hi" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('hi')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="hi" />);
   });
 
   it('unmounts components with uncaught errors', () => {
@@ -1447,7 +1458,7 @@ describe('ReactIncrementalErrorHandling', () => {
       'Parent componentWillUnmount [!]',
       'BrokenRenderAndUnmount componentWillUnmount',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     expect(() => {
       ReactNoop.flushSync();
@@ -1478,7 +1489,11 @@ describe('ReactIncrementalErrorHandling', () => {
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYield(['barRef attach']);
-    expect(ReactNoop.getChildren()).toEqual([div(span('Bar'))]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Bar" />
+      </div>,
+    );
 
     // Unmount
     ReactNoop.render(<Foo hide={true} />);
@@ -1489,7 +1504,7 @@ describe('ReactIncrementalErrorHandling', () => {
       'Bar unmount',
     ]);
     // Because there was an error, entire tree should unmount
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   it('handles error thrown by host config while working on failed root', () => {
@@ -1562,7 +1577,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'componentDidCatch',
       'ErrorBoundary (catch)',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops" />,
+    );
 
     if (__DEV__) {
       expect(console.error).toHaveBeenCalledTimes(1);
@@ -1635,7 +1652,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'ErrorBoundary (catch)',
       'ErrorMessage',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
   });
 
   it('calls the correct lifecycles on the error boundary after catching an error (mixed)', () => {
@@ -1676,7 +1695,9 @@ describe('ReactIncrementalErrorHandling', () => {
       'render error message',
       'did update',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
   });
 
   it('provides component stack to the error boundary with componentDidCatch', () => {
@@ -1710,13 +1731,15 @@ describe('ReactIncrementalErrorHandling', () => {
       </ErrorBoundary>,
     );
     expect(Scheduler).toFlushAndYield(['render error message']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span(
-        'Caught an error:\n' +
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Caught an error:\n' +
           '    in BrokenRender (at **)\n' +
-          '    in ErrorBoundary (at **).',
-      ),
-    ]);
+          '    in ErrorBoundary (at **).'
+        }
+      />,
+    );
   });
 
   it('does not provide component stack to the error boundary with getDerivedStateFromError', () => {
@@ -1744,7 +1767,9 @@ describe('ReactIncrementalErrorHandling', () => {
       </ErrorBoundary>,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello" />,
+    );
   });
 
   it('provides component stack even if overriding prepareStackTrace', () => {
@@ -1794,13 +1819,15 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushAndYield(['render error message']);
     Error.prepareStackTrace = undefined;
 
-    expect(ReactNoop.getChildren()).toEqual([
-      span(
-        'Caught an error:\n' +
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Caught an error:\n' +
           '    in BrokenRender (at **)\n' +
-          '    in ErrorBoundary (at **).',
-      ),
-    ]);
+          '    in ErrorBoundary (at **).'
+        }
+      />,
+    );
   });
 
   if (!ReactFeatureFlags.disableModulePatternComponents) {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index 247ef5f406823..3cc006dad1c52 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -25,13 +25,9 @@ describe('ReactIncrementalScheduling', () => {
     act = require('jest-react').act;
   });
 
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
   it('schedules and flushes deferred work', () => {
     ReactNoop.render(<span prop="1" />);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     expect(Scheduler).toFlushWithoutYielding();
     expect(ReactNoop).toMatchRenderedOutput(<span prop="1" />);
@@ -44,9 +40,9 @@ describe('ReactIncrementalScheduling', () => {
 
     expect(Scheduler).toFlushWithoutYielding();
 
-    expect(ReactNoop.getChildren('a')).toEqual([span('a:1')]);
-    expect(ReactNoop.getChildren('b')).toEqual([span('b:1')]);
-    expect(ReactNoop.getChildren('c')).toEqual([span('c:1')]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:1" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:1" />);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(<span prop="c:1" />);
   });
 
   it('schedules top-level updates in order of priority', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
index bb5f2e597007e..3e4cd2e4f55b5 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -23,21 +23,6 @@ describe('ReactIncrementalSideEffects', () => {
     Scheduler = require('scheduler');
   });
 
-  function div(...children) {
-    children = children.map(c =>
-      typeof c === 'string' ? {text: c, hidden: false} : c,
-    );
-    return {type: 'div', children, prop: undefined, hidden: false};
-  }
-
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
-  function text(t) {
-    return {text: t, hidden: false};
-  }
-
   // Note: This is based on a similar component we use in www. We can delete
   // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
@@ -67,11 +52,20 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo text="Hello" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div(span())]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>Hello</span>
+      </div>,
+    );
 
     ReactNoop.render(<Foo text="World" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div(span(), span())]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>World</span>
+        <span>World</span>
+      </div>,
+    );
   });
 
   it('can update child nodes of a fragment', function () {
@@ -95,19 +89,34 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo text="Hello" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div(span(), span('test'))]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>Hello</span>
+        <span prop="test" />
+      </div>,
+    );
 
     ReactNoop.render(<Foo text="World" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([
-      div(span(), span(), div(), span('test')),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>World</span>
+        <span>World</span>
+        <div />
+        <span prop="test" />
+      </div>,
+    );
 
     ReactNoop.render(<Foo text="Hi" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([
-      div(span(), div(), span(), span('test')),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>Hi</span>
+        <div />
+        <span>Hi</span>
+        <span prop="test" />
+      </div>,
+    );
   });
 
   it('can update child nodes rendering into text nodes', function () {
@@ -128,11 +137,11 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo text="Hello" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div('Hello')]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
 
     ReactNoop.render(<Foo text="World" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div('World', 'World', '!')]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>WorldWorld!</div>);
   });
 
   it('can deletes children either components, host or text', function () {
@@ -152,13 +161,17 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo show={true} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([
-      div(div(), span('Hello'), 'World'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div />
+        <span prop="Hello" />
+        World
+      </div>,
+    );
 
     ReactNoop.render(<Foo show={false} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div()]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
   });
 
   it('can delete a child that changes type - implicit keys', function () {
@@ -194,23 +207,33 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo useClass={true} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div(span('Class'), 'Trail')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Class" />
+        Trail
+      </div>,
+    );
 
     expect(unmounted).toBe(false);
 
     ReactNoop.render(<Foo useFunction={true} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div(span('Function'), 'Trail')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Function" />
+        Trail
+      </div>,
+    );
 
     expect(unmounted).toBe(true);
 
     ReactNoop.render(<Foo useText={true} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div('Text', 'Trail')]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>TextTrail</div>);
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div('Trail')]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Trail</div>);
   });
 
   it('can delete a child that changes type - explicit keys', function () {
@@ -244,19 +267,29 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo useClass={true} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div(span('Class'), 'Trail')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Class" />
+        Trail
+      </div>,
+    );
 
     expect(unmounted).toBe(false);
 
     ReactNoop.render(<Foo useFunction={true} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div(span('Function'), 'Trail')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Function" />
+        Trail
+      </div>,
+    );
 
     expect(unmounted).toBe(true);
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div('Trail')]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Trail</div>);
   });
 
   it('can delete a child when it unmounts inside a portal', () => {
@@ -280,12 +313,14 @@ describe('ReactIncrementalSideEffects', () => {
       </div>,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div()]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([
-      div(),
-      span('Hello'),
-      text('World'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
 
     ReactNoop.render(
       <div>
@@ -293,8 +328,8 @@ describe('ReactIncrementalSideEffects', () => {
       </div>,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div()]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
 
     ReactNoop.render(
       <div>
@@ -302,36 +337,40 @@ describe('ReactIncrementalSideEffects', () => {
       </div>,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div()]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([
-      div(),
-      span('Hello'),
-      text('World'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
 
     ReactNoop.render(null);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
 
     ReactNoop.render(<Foo show={false} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
 
     ReactNoop.render(<Foo show={true} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([
-      div(),
-      span('Hello'),
-      text('World'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
 
     ReactNoop.render(null);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
   });
 
   it('can delete a child when it unmounts with a portal', () => {
@@ -355,31 +394,35 @@ describe('ReactIncrementalSideEffects', () => {
       </div>,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([div()]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([
-      div(),
-      span('Hello'),
-      text('World'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
 
     ReactNoop.render(null);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([
-      div(),
-      span('Hello'),
-      text('World'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
 
     ReactNoop.render(null);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-    expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
   });
 
   it('does not update child nodes if a flush is aborted', () => {
@@ -403,9 +446,15 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo text="Hello" />);
     expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'Bar', 'Bar']);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(div(span('Hello'), span('Hello')), span('Yo')),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>
+          <span prop="Hello" />
+          <span prop="Hello" />
+        </div>
+        <span prop="Yo" />
+      </div>,
+    );
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       React.startTransition(() => {
@@ -417,9 +466,15 @@ describe('ReactIncrementalSideEffects', () => {
 
     // Flush some of the work without committing
     expect(Scheduler).toFlushAndYieldThrough(['Foo', 'Bar']);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(div(span('Hello'), span('Hello')), span('Yo')),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>
+          <span prop="Hello" />
+          <span prop="Hello" />
+        </div>
+        <span prop="Yo" />
+      </div>,
+    );
   });
 
   // @gate www
@@ -729,55 +784,61 @@ describe('ReactIncrementalSideEffects', () => {
     }
     ReactNoop.render(<Foo tick={0} idx={0} />);
     ReactNoop.flushDeferredPri(40 + 25);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(0),
-        div(/*the spans are down-prioritized and not rendered yet*/),
-      ),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={0} />
+        <div />
+      </div>,
+    );
     ReactNoop.render(<Foo tick={1} idx={0} />);
     ReactNoop.flushDeferredPri(35 + 25);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(span(1), div(/*still not rendered yet*/)),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={1} />
+        <div>{/*still not rendered yet*/}</div>
+      </div>,
+    );
     ReactNoop.flushDeferredPri(30 + 25);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(1),
-        div(
-          // Now we had enough time to finish the spans.
-          span(0),
-          span(1),
-        ),
-      ),
-    ]);
-    const innerSpanA = ReactNoop.getChildren()[0].children[1].children[1];
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={1} />
+        <div>
+          {/* Now we had enough time to finish the spans. */}
+          <span prop={0} />
+          <span prop={1} />
+        </div>
+        ,
+      </div>,
+    );
+    const innerSpanA =
+      ReactNoop.dangerouslyGetChildren()[0].children[1].children[1];
     ReactNoop.render(<Foo tick={2} idx={1} />);
     ReactNoop.flushDeferredPri(30 + 25);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(2),
-        div(
-          // Still same old numbers.
-          span(0),
-          span(1),
-        ),
-      ),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={2} />
+        <div>
+          {/* Still same old numbers. */}
+          <span prop={0} />
+          <span prop={1} />
+        </div>
+      </div>,
+    );
     ReactNoop.render(<Foo tick={3} idx={1} />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(3),
-        div(
-          // New numbers.
-          span(1),
-          span(2),
-        ),
-      ),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={3} />
+        <div>
+          {/* New numbers. */}
+          <span prop={1} />
+          <span prop={2} />
+        </div>
+      </div>,
+    );
 
-    const innerSpanB = ReactNoop.getChildren()[0].children[1].children[1];
+    const innerSpanB =
+      ReactNoop.dangerouslyGetChildren()[0].children[1].children[1];
     // This should have been an update to an existing instance, not recreation.
     // We verify that by ensuring that the child instance was the same as
     // before.
@@ -823,39 +884,44 @@ describe('ReactIncrementalSideEffects', () => {
     }
     ReactNoop.render(<Foo tick={0} idx={0} />);
     ReactNoop.flushDeferredPri(65 + 5);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(0),
-        div(/*the spans are down-prioritized and not rendered yet*/),
-      ),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={0} />
+        {/*the spans are down-prioritized and not rendered yet*/}
+        <div />
+      </div>,
+    );
 
     expect(ops).toEqual(['Foo', 'Baz', 'Bar']);
     ops = [];
 
     ReactNoop.render(<Foo tick={1} idx={0} />);
     ReactNoop.flushDeferredPri(70);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(span(1), div(/*still not rendered yet*/)),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={1} />
+        {/*still not rendered yet*/}
+        <div />
+      </div>,
+    );
 
     expect(ops).toEqual(['Foo']);
     ops = [];
 
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(1),
-        div(
-          // Now we had enough time to finish the spans.
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-        ),
-      ),
+    expect(ReactNoop).toMatchRenderedOutput([
+      <div>
+        <span prop={1} />,
+        <div>
+          {/* Now we had enough time to finish the spans. */}
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+        </div>
+      </div>,
     ]);
 
     expect(ops).toEqual(['Bar', 'Baz', 'Bar', 'Bar', 'Baz', 'Bar', 'Bar']);
@@ -865,20 +931,20 @@ describe('ReactIncrementalSideEffects', () => {
     // way through.
     ReactNoop.render(<Foo tick={2} idx={1} />);
     ReactNoop.flushDeferredPri(95);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(2),
-        div(
-          // Still same old numbers.
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-        ),
-      ),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={2} />,
+        <div>
+          {/* Still same old numbers. */}
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+        </div>
+      </div>,
+    );
 
     // We let it finish half way through. That means we'll have one fully
     // completed Baz, one half-way completed Baz and one fully incomplete Baz.
@@ -889,20 +955,20 @@ describe('ReactIncrementalSideEffects', () => {
     // way through.
     ReactNoop.render(<Foo tick={3} idx={1} />);
     ReactNoop.flushDeferredPri(50);
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(3),
-        div(
-          // Old numbers.
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-          span(0),
-        ),
-      ),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={3} />
+        <div>
+          {/* Old numbers. */}
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+        </div>
+      </div>,
+    );
 
     expect(ops).toEqual(['Foo']);
     ops = [];
@@ -910,19 +976,19 @@ describe('ReactIncrementalSideEffects', () => {
     // We should now be able to reuse some of the work we've already done
     // and replay those side-effects.
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([
-      div(
-        span(3),
-        div(
-          // New numbers.
-          span(1),
-          span(1),
-          span(1),
-          span(1),
-          span(1),
-          span(1),
-        ),
-      ),
+    expect(ReactNoop).toMatchRenderedOutput([
+      <div>
+        <span prop={3} />,
+        <div>
+          {/* New numbers. */}
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+        </div>
+      </div>,
     ]);
 
     expect(ops).toEqual(['Bar', 'Baz', 'Bar', 'Bar']);
@@ -1039,10 +1105,10 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('foo')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="foo" />);
     let called = false;
     instance.setState({text: 'bar'}, () => {
-      expect(ReactNoop.getChildren()).toEqual([span('bar')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="bar" />);
       called = true;
     });
     expect(Scheduler).toFlushWithoutYielding();
@@ -1067,7 +1133,7 @@ describe('ReactIncrementalSideEffects', () => {
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('foo')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="foo" />);
     let called = false;
     instance.setState({}, () => {
       called = true;
@@ -1253,7 +1319,7 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ops).toEqual([
       classInstance,
       // no call for function components
-      div(),
+      {type: 'div', children: [], prop: undefined, hidden: false},
     ]);
 
     ops = [];
@@ -1267,7 +1333,7 @@ describe('ReactIncrementalSideEffects', () => {
       null,
       // reattach as a separate phase
       classInstance,
-      div(),
+      {type: 'div', children: [], prop: undefined, hidden: false},
     ]);
 
     ops = [];
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
index effeea5ff5ec7..07bf3af6e1211 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
@@ -316,7 +316,8 @@ describe('ReactIncrementalTriangle', () => {
     reset();
 
     function assertConsistentTree(activeTriangleIndices = new Set(), counter) {
-      const children = ReactNoop.getChildren(rootID);
+      const childrenJSX = ReactNoop.getPendingChildrenAsJSX(rootID);
+      const children = childrenJSX === null ? [] : childrenJSX.props.children;
 
       if (children.length !== TOTAL_CHILDREN) {
         throw new Error('Wrong number of children.');
@@ -327,7 +328,7 @@ describe('ReactIncrementalTriangle', () => {
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
 
-        const output = JSON.parse(child.prop);
+        const output = JSON.parse(child.props.prop);
         const prop = output.prop;
         const isActive = output.isActive;
         const counterContext = output.counterContext;
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index f5f480ecca90f..02c849f6ed57a 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -28,10 +28,6 @@ describe('ReactIncrementalUpdates', () => {
       require('react-reconciler/constants').ContinuousEventPriority;
   });
 
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
   function flushNextRenderIfExpired() {
     // This will start rendering the next level of work. If the work hasn't
     // expired yet, React will exit without doing anything. If it has expired,
@@ -174,7 +170,7 @@ describe('ReactIncrementalUpdates', () => {
 
     // Begin the updates but don't flush them yet
     expect(Scheduler).toFlushAndYieldThrough(['a', 'b', 'c']);
-    expect(ReactNoop.getChildren()).toEqual([span('')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="" />);
 
     // Schedule some more updates at different priorities
     instance.setState(createUpdate('d'));
@@ -193,11 +189,11 @@ describe('ReactIncrementalUpdates', () => {
       )
     ) {
       expect(Scheduler).toHaveYielded(['d', 'e', 'f']);
-      expect(ReactNoop.getChildren()).toEqual([span('def')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="def" />);
     } else {
       // Update d was dropped and replaced by e.
       expect(Scheduler).toHaveYielded(['e', 'f']);
-      expect(ReactNoop.getChildren()).toEqual([span('ef')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="ef" />);
     }
 
     // Now flush the remaining work. Even though e and f were already processed,
@@ -235,7 +231,7 @@ describe('ReactIncrementalUpdates', () => {
         'g',
       ]);
     }
-    expect(ReactNoop.getChildren()).toEqual([span('abcdefg')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="abcdefg" />);
   });
 
   it('can abort an update, schedule a replaceState, and resume', () => {
@@ -279,7 +275,7 @@ describe('ReactIncrementalUpdates', () => {
 
     // Begin the updates but don't flush them yet
     expect(Scheduler).toFlushAndYieldThrough(['a', 'b', 'c']);
-    expect(ReactNoop.getChildren()).toEqual([span('')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="" />);
 
     // Schedule some more updates at different priorities
     instance.setState(createUpdate('d'));
@@ -305,7 +301,7 @@ describe('ReactIncrementalUpdates', () => {
       // Update d was dropped and replaced by e.
       expect(Scheduler).toHaveYielded(['e', 'f']);
     }
-    expect(ReactNoop.getChildren()).toEqual([span('f')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="f" />);
 
     // Now flush the remaining work. Even though e and f were already processed,
     // they should be processed again, to ensure that the terminal state
@@ -342,7 +338,7 @@ describe('ReactIncrementalUpdates', () => {
         'g',
       ]);
     }
-    expect(ReactNoop.getChildren()).toEqual([span('fg')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="fg" />);
   });
 
   it('passes accumulation of previous updates to replaceState updater function', () => {
@@ -537,7 +533,7 @@ describe('ReactIncrementalUpdates', () => {
     ReactNoop.flushSync(() => {
       ReactNoop.render(<Foo />);
     });
-    expect(ReactNoop.getChildren()).toEqual([span('derived state')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="derived state" />);
 
     ReactNoop.flushSync(() => {
       // Triggers getDerivedStateFromProps again
@@ -546,12 +542,12 @@ describe('ReactIncrementalUpdates', () => {
       // led to this bug. Removing it causes it to "accidentally" work.
       foo.setState({value: 'update state'}, function noop() {});
     });
-    expect(ReactNoop.getChildren()).toEqual([span('derived state')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="derived state" />);
 
     ReactNoop.flushSync(() => {
       bar.setState({});
     });
-    expect(ReactNoop.getChildren()).toEqual([span('derived state')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="derived state" />);
   });
 
   it('regression: does not expire soon due to layout effects in the last batch', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
index bd26d03f0582c..1ca0cf2e99dde 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -31,10 +31,6 @@ describe('memo', () => {
     ({Suspense} = React);
   });
 
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
   function Text(props) {
     Scheduler.unstable_yieldValue(props.text);
     return <span prop={props.text} />;
@@ -112,7 +108,7 @@ describe('memo', () => {
         expect(Scheduler).toFlushAndYield(['Loading...']);
         await Promise.resolve();
         expect(Scheduler).toFlushAndYield([0]);
-        expect(ReactNoop.getChildren()).toEqual([span(0)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
 
         // Should bail out because props have not changed
         ReactNoop.render(
@@ -121,7 +117,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield([]);
-        expect(ReactNoop.getChildren()).toEqual([span(0)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
 
         // Should update because count prop changed
         ReactNoop.render(
@@ -130,7 +126,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield([1]);
-        expect(ReactNoop.getChildren()).toEqual([span(1)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
       });
 
       it("does not bail out if there's a context change", async () => {
@@ -167,17 +163,17 @@ describe('memo', () => {
         expect(Scheduler).toFlushAndYield(['Loading...']);
         await Promise.resolve();
         expect(Scheduler).toFlushAndYield(['Count: 0']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
         // Should bail out because props have not changed
         ReactNoop.render(<Parent ref={parent} />);
         expect(Scheduler).toFlushAndYield([]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
 
         // Should update because there was a context change
         parent.current.setState({count: 1});
         expect(Scheduler).toFlushAndYield(['Count: 1']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
       });
 
       it('consistent behavior for reusing props object across different function component types', async () => {
@@ -352,7 +348,7 @@ describe('memo', () => {
         expect(Scheduler).toFlushAndYield(['Loading...']);
         await Promise.resolve();
         expect(Scheduler).toFlushAndYield([0]);
-        expect(ReactNoop.getChildren()).toEqual([span(0)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
 
         // Should bail out because props have not changed
         ReactNoop.render(
@@ -361,7 +357,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield(['Old count: 0, New count: 0']);
-        expect(ReactNoop.getChildren()).toEqual([span(0)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
 
         // Should update because count prop changed
         ReactNoop.render(
@@ -370,7 +366,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield(['Old count: 0, New count: 1', 1]);
-        expect(ReactNoop.getChildren()).toEqual([span(1)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
       });
 
       it('supports non-pure class components', async () => {
@@ -390,7 +386,7 @@ describe('memo', () => {
         expect(Scheduler).toFlushAndYield(['Loading...']);
         await Promise.resolve();
         expect(Scheduler).toFlushAndYield(['0!']);
-        expect(ReactNoop.getChildren()).toEqual([span('0!')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="0!" />);
 
         // Should bail out because props have not changed
         ReactNoop.render(
@@ -399,7 +395,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield([]);
-        expect(ReactNoop.getChildren()).toEqual([span('0!')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="0!" />);
 
         // Should update because count prop changed
         ReactNoop.render(
@@ -408,7 +404,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield(['1!']);
-        expect(ReactNoop.getChildren()).toEqual([span('1!')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="1!" />);
       });
 
       it('supports defaultProps defined on the memo() return value', async () => {
@@ -447,7 +443,7 @@ describe('memo', () => {
         }).toErrorDev([
           'Counter: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span(15)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={15} />);
 
         // Should bail out because props have not changed
         ReactNoop.render(
@@ -456,7 +452,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield([]);
-        expect(ReactNoop.getChildren()).toEqual([span(15)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={15} />);
 
         // Should update because count prop changed
         ReactNoop.render(
@@ -465,7 +461,7 @@ describe('memo', () => {
           </Suspense>,
         );
         expect(Scheduler).toFlushAndYield([20]);
-        expect(ReactNoop.getChildren()).toEqual([span(20)]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={20} />);
       });
 
       it('warns if the first argument is undefined', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index bc77687451743..25da1d13a6b2b 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -128,12 +128,12 @@ describe('ReactNewContext', () => {
 
         ReactNoop.render(<App value={2} />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 2')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
 
         // Update
         ReactNoop.render(<App value={3} />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 3')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 3" />);
       });
 
       it('propagates through shouldComponentUpdate false', () => {
@@ -193,7 +193,7 @@ describe('ReactNewContext', () => {
           'Consumer',
           'Consumer render prop',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 2')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
 
         // Update
         ReactNoop.render(<App value={3} />);
@@ -202,7 +202,7 @@ describe('ReactNewContext', () => {
           'Provider',
           'Consumer render prop',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 3')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 3" />);
       });
 
       it('consumers bail out if context value is the same', () => {
@@ -262,7 +262,7 @@ describe('ReactNewContext', () => {
           'Consumer',
           'Consumer render prop',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 2')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
 
         // Update with the same context value
         ReactNoop.render(<App value={2} />);
@@ -271,7 +271,7 @@ describe('ReactNewContext', () => {
           'Provider',
           // Don't call render prop again
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 2')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
       });
 
       it('nested providers', () => {
@@ -322,12 +322,12 @@ describe('ReactNewContext', () => {
 
         ReactNoop.render(<App value={2} />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 8')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 8" />);
 
         // Update
         ReactNoop.render(<App value={3} />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([span('Result: 12')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 12" />);
       });
 
       it('should provide the correct (default) values to consumers outside of a provider', () => {
@@ -417,26 +417,32 @@ describe('ReactNewContext', () => {
 
         ReactNoop.render(<App value={2} />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Result: 4'),
-          span('Result: 2'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Result: 4" />
+            <span prop="Result: 2" />
+          </>,
+        );
 
         // Update
         ReactNoop.render(<App value={3} />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Result: 6'),
-          span('Result: 3'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Result: 6" />
+            <span prop="Result: 3" />
+          </>,
+        );
 
         // Another update
         ReactNoop.render(<App value={4} />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Result: 8'),
-          span('Result: 4'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Result: 8" />
+            <span prop="Result: 4" />
+          </>,
+        );
       });
 
       it('compares context values with Object.is semantics', () => {
@@ -496,7 +502,7 @@ describe('ReactNewContext', () => {
           'Consumer',
           'Consumer render prop',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Result: NaN')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: NaN" />);
 
         // Update
         ReactNoop.render(<App value={NaN} />);
@@ -506,7 +512,7 @@ describe('ReactNewContext', () => {
           // Consumer should not re-render again
           // 'Consumer render prop',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Result: NaN')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: NaN" />);
       });
 
       it('context unwinds when interrupted', () => {
@@ -555,10 +561,10 @@ describe('ReactNewContext', () => {
 
         ReactNoop.render(<App value="A" />);
         expect(Scheduler).toFlushWithoutYielding();
-        expect(ReactNoop.getChildren()).toEqual([
+        expect(ReactNoop).toMatchRenderedOutput(
           // The second provider should use the default value.
-          span('Result: Does not unwind'),
-        ]);
+          <span prop="Result: Does not unwind" />,
+        );
       });
 
       it("does not re-render if there's an update in a child", () => {
@@ -594,11 +600,15 @@ describe('ReactNewContext', () => {
         // Initial mount
         ReactNoop.render(<App value={1} />);
         expect(Scheduler).toFlushAndYield(['Consumer render prop', 'Child']);
-        expect(ReactNoop.getChildren()).toEqual([span('Context: 1, Step: 0')]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Context: 1, Step: 0" />,
+        );
 
         child.setState({step: 1});
         expect(Scheduler).toFlushAndYield(['Child']);
-        expect(ReactNoop.getChildren()).toEqual([span('Context: 1, Step: 1')]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Context: 1, Step: 1" />,
+        );
       });
 
       it('consumer bails out if value is unchanged and something above bailed out', () => {
@@ -654,17 +664,32 @@ describe('ReactNewContext', () => {
           'ChildWithCachedRenderCallback',
           'Consumer',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span(1), span(1)]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop={1} />
+            <span prop={1} />
+          </>,
+        );
 
         // Update (bailout)
         ReactNoop.render(<App value={1} />);
         expect(Scheduler).toFlushAndYield(['App']);
-        expect(ReactNoop.getChildren()).toEqual([span(1), span(1)]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop={1} />
+            <span prop={1} />
+          </>,
+        );
 
         // Update (no bailout)
         ReactNoop.render(<App value={2} />);
         expect(Scheduler).toFlushAndYield(['App', 'Consumer', 'Consumer']);
-        expect(ReactNoop.getChildren()).toEqual([span(2), span(2)]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop={2} />
+            <span prop={2} />
+          </>,
+        );
       });
 
       // @gate www
@@ -788,26 +813,32 @@ describe('ReactNewContext', () => {
         let inst;
         ReactNoop.render(<App ref={ref => (inst = ref)} />);
         expect(Scheduler).toFlushAndYield(['App']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('static 1'),
-          span('static 2'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="static 1" />
+            <span prop="static 2" />
+          </>,
+        );
         // Update the first time
         inst.setState({step: 1});
         expect(Scheduler).toFlushAndYield(['App', 'Consumer']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('static 1'),
-          span('static 2'),
-          span(1),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="static 1" />
+            <span prop="static 2" />
+            <span prop={1} />
+          </>,
+        );
         // Update the second time
         inst.setState({step: 2});
         expect(Scheduler).toFlushAndYield(['App', 'Consumer']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('static 1'),
-          span('static 2'),
-          span(2),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="static 1" />
+            <span prop="static 2" />
+            <span prop={2} />
+          </>,
+        );
       });
     });
   }
@@ -936,7 +967,7 @@ describe('ReactNewContext', () => {
       // Initial mount
       ReactNoop.render(<App value={1} />);
       expect(Scheduler).toFlushAndYield(['App', 'Child']);
-      expect(ReactNoop.getChildren()).toEqual([span('Child')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
 
       // Update
       ReactNoop.render(<App value={1} />);
@@ -944,7 +975,7 @@ describe('ReactNewContext', () => {
         'App',
         // Child does not re-render
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Child')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
     });
 
     it('provider does not bail out if legacy context changed above', () => {
@@ -995,22 +1026,22 @@ describe('ReactNewContext', () => {
         </LegacyProvider>,
       );
       expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']);
-      expect(ReactNoop.getChildren()).toEqual([span('Child')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
 
       // Update App with same value (should bail out)
       appRef.current.setState({value: 1});
       expect(Scheduler).toFlushAndYield(['App']);
-      expect(ReactNoop.getChildren()).toEqual([span('Child')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
 
       // Update LegacyProvider (should not bail out)
       legacyProviderRef.current.setState({value: 1});
       expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']);
-      expect(ReactNoop.getChildren()).toEqual([span('Child')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
 
       // Update App with same value (should bail out)
       appRef.current.setState({value: 1});
       expect(Scheduler).toFlushAndYield(['App']);
-      expect(ReactNoop.getChildren()).toEqual([span('Child')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
     });
   });
 
@@ -1066,17 +1097,17 @@ describe('ReactNewContext', () => {
 
       ReactNoop.render(<App foo={1} bar={1} />);
       expect(Scheduler).toFlushAndYield(['Foo: 1, Bar: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Foo: 1, Bar: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Foo: 1, Bar: 1" />);
 
       // Update foo
       ReactNoop.render(<App foo={2} bar={1} />);
       expect(Scheduler).toFlushAndYield(['Foo: 2, Bar: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Foo: 2, Bar: 1')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Foo: 2, Bar: 1" />);
 
       // Update bar
       ReactNoop.render(<App foo={2} bar={2} />);
       expect(Scheduler).toFlushAndYield(['Foo: 2, Bar: 2']);
-      expect(ReactNoop.getChildren()).toEqual([span('Foo: 2, Bar: 2')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Foo: 2, Bar: 2" />);
     });
 
     // Context consumer bails out on propagating "deep" updates when `value` hasn't changed.
@@ -1112,12 +1143,12 @@ describe('ReactNewContext', () => {
       let inst;
       ReactNoop.render(<App value={1} ref={ref => (inst = ref)} />);
       expect(Scheduler).toFlushAndYield(['App', 'App#renderConsumer']);
-      expect(ReactNoop.getChildren()).toEqual([span('hello')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="hello" />);
 
       // Update
       inst.setState({text: 'goodbye'});
       expect(Scheduler).toFlushAndYield(['App', 'App#renderConsumer']);
-      expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="goodbye" />);
     });
   });
 
@@ -1186,33 +1217,33 @@ describe('ReactNewContext', () => {
 
       ReactNoop.render(<App foo={1} bar={1} baz={1} />);
       expect(Scheduler).toFlushAndYield(['Foo: 1, Bar: 1', 'Baz: 1']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Foo: 1, Bar: 1'),
-        span('Baz: 1'),
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 1, Bar: 1" />,
+        <span prop="Baz: 1" />,
       ]);
 
       // Update only foo
       ReactNoop.render(<App foo={2} bar={1} baz={1} />);
       expect(Scheduler).toFlushAndYield(['Foo: 2, Bar: 1']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Foo: 2, Bar: 1'),
-        span('Baz: 1'),
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 2, Bar: 1" />,
+        <span prop="Baz: 1" />,
       ]);
 
       // Update only bar
       ReactNoop.render(<App foo={2} bar={2} baz={1} />);
       expect(Scheduler).toFlushAndYield(['Foo: 2, Bar: 2']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Foo: 2, Bar: 2'),
-        span('Baz: 1'),
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 2, Bar: 2" />,
+        <span prop="Baz: 1" />,
       ]);
 
       // Update only baz
       ReactNoop.render(<App foo={2} bar={2} baz={2} />);
       expect(Scheduler).toFlushAndYield(['Baz: 2']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Foo: 2, Bar: 2'),
-        span('Baz: 2'),
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 2, Bar: 2" />,
+        <span prop="Baz: 2" />,
       ]);
     });
 
@@ -1255,12 +1286,12 @@ describe('ReactNewContext', () => {
       let inst;
       ReactNoop.render(<App value={1} ref={ref => (inst = ref)} />);
       expect(Scheduler).toFlushAndYield(['App', 'App#renderConsumer']);
-      expect(ReactNoop.getChildren()).toEqual([span('hello')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="hello" />);
 
       // Update
       inst.setState({text: 'goodbye'});
       expect(Scheduler).toFlushAndYield(['App', 'App#renderConsumer']);
-      expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="goodbye" />);
     });
 
     it('warns when reading context inside render phase class setState updater', () => {
@@ -1366,12 +1397,12 @@ describe('ReactNewContext', () => {
       let inst;
       ReactNoop.render(<App value={1} ref={ref => (inst = ref)} />);
       expect(Scheduler).toFlushAndYield(['App', 'App#renderConsumer']);
-      expect(ReactNoop.getChildren()).toEqual([span('hello')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="hello" />);
 
       // Update
       inst.setState({text: 'goodbye'});
       expect(Scheduler).toFlushAndYield(['App', 'App#renderConsumer']);
-      expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="goodbye" />);
     });
   });
 
@@ -1393,7 +1424,7 @@ describe('ReactNewContext', () => {
       </Context.Provider>,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span(10)]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={10} />);
   });
 
   describe('fuzz test', () => {
@@ -1518,9 +1549,10 @@ describe('ReactNewContext', () => {
       );
 
       function assertConsistentTree(expectedValues = {}) {
-        const children = ReactNoop.getChildren();
+        const jsx = ReactNoop.getChildrenAsJSX();
+        const children = jsx === null ? [] : jsx.props.children;
         children.forEach(child => {
-          const text = child.prop;
+          const text = child.props.prop;
           const key = text[0];
           const value = parseInt(text[2], 10);
           const expectedValue = expectedValues[key];
diff --git a/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
index bf660226fd2a9..b6f20c509cbc1 100644
--- a/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
@@ -58,6 +58,6 @@ describe('internal act()', () => {
     });
     expect(Scheduler).toHaveYielded(['stage 1', 'stage 2']);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([{text: '1', hidden: false}]);
+    expect(ReactNoop).toMatchRenderedOutput('1');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
index e8306f852db96..f53f45e30d68c 100644
--- a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
@@ -49,8 +49,12 @@ describe('ReactPersistent', () => {
     return {type: 'span', children: [], prop, hidden: false};
   }
 
-  function getChildren() {
-    return ReactNoopPersistent.getChildren();
+  // For persistent renderers we have to mix deep equality and reference equality checks
+  //  for which we need the actual children.
+  //  None of the tests are gated and the underlying implementation is rarely touch
+  //  so it's unlikely we deal with failing `toEqual` checks which cause bad performance.
+  function dangerouslyGetChildren() {
+    return ReactNoopPersistent.dangerouslyGetChildren();
   }
 
   it('can update child nodes of a host instance', () => {
@@ -69,12 +73,12 @@ describe('ReactPersistent', () => {
 
     render(<Foo text="Hello" />);
     expect(Scheduler).toFlushWithoutYielding();
-    const originalChildren = getChildren();
+    const originalChildren = dangerouslyGetChildren();
     expect(originalChildren).toEqual([div(span())]);
 
     render(<Foo text="World" />);
     expect(Scheduler).toFlushWithoutYielding();
-    const newChildren = getChildren();
+    const newChildren = dangerouslyGetChildren();
     expect(newChildren).toEqual([div(span(), span())]);
 
     expect(originalChildren).toEqual([div(span())]);
@@ -103,12 +107,12 @@ describe('ReactPersistent', () => {
 
     render(<Foo text="Hello" />);
     expect(Scheduler).toFlushWithoutYielding();
-    const originalChildren = getChildren();
+    const originalChildren = dangerouslyGetChildren();
     expect(originalChildren).toEqual([div(span('Hello'))]);
 
     render(<Foo text="World" />);
     expect(Scheduler).toFlushWithoutYielding();
-    const newChildren = getChildren();
+    const newChildren = dangerouslyGetChildren();
     expect(newChildren).toEqual([div(span('Hello'), span('World'))]);
 
     expect(originalChildren).toEqual([div(span('Hello'))]);
@@ -129,12 +133,12 @@ describe('ReactPersistent', () => {
 
     render(<Foo text="Hello" />);
     expect(Scheduler).toFlushWithoutYielding();
-    const originalChildren = getChildren();
+    const originalChildren = dangerouslyGetChildren();
     expect(originalChildren).toEqual([div('Hello', span())]);
 
     render(<Foo text="World" />);
     expect(Scheduler).toFlushWithoutYielding();
-    const newChildren = getChildren();
+    const newChildren = dangerouslyGetChildren();
     expect(newChildren).toEqual([div('World', span())]);
 
     expect(originalChildren).toEqual([div('Hello', span())]);
@@ -173,7 +177,7 @@ describe('ReactPersistent', () => {
 
     expect(emptyPortalChildSet).toEqual([]);
 
-    const originalChildren = getChildren();
+    const originalChildren = dangerouslyGetChildren();
     expect(originalChildren).toEqual([div()]);
     const originalPortalChildren = portalContainer.children;
     expect(originalPortalChildren).toEqual([div(span())]);
@@ -185,7 +189,7 @@ describe('ReactPersistent', () => {
     );
     expect(Scheduler).toFlushWithoutYielding();
 
-    const newChildren = getChildren();
+    const newChildren = dangerouslyGetChildren();
     expect(newChildren).toEqual([div()]);
     const newPortalChildren = portalContainer.children;
     expect(newPortalChildren).toEqual([div(span(), 'Hello ', 'World')]);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
index afa9ab499dca1..b14f7494a572c 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
@@ -22,10 +22,6 @@ describe('ReactSuspense', () => {
     Scheduler = require('scheduler');
   });
 
-  function text(t) {
-    return {text: t, hidden: false};
-  }
-
   function createThenable() {
     let completed = false;
     let resolve;
@@ -88,13 +84,13 @@ describe('ReactSuspense', () => {
 
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Waiting')]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting');
     expect(ops).toEqual([new Set([promise])]);
     ops = [];
 
     await resolve();
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Done')]);
+    expect(ReactNoop).toMatchRenderedOutput('Done');
     expect(ops).toEqual([]);
   });
 
@@ -127,21 +123,21 @@ describe('ReactSuspense', () => {
 
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 1')]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 1');
     expect(ops).toEqual([new Set([promise1, promise2])]);
     ops = [];
 
     await resolve1();
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 1')]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 1');
     expect(ops).toEqual([new Set([promise2])]);
     ops = [];
 
     await resolve2();
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Done'), text('Done')]);
+    expect(ReactNoop).toMatchRenderedOutput('DoneDone');
     expect(ops).toEqual([]);
   });
 
@@ -172,7 +168,7 @@ describe('ReactSuspense', () => {
 
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 2')]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 2');
     expect(ops1).toEqual([]);
     expect(ops2).toEqual([new Set([promise])]);
   });
@@ -214,7 +210,7 @@ describe('ReactSuspense', () => {
 
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 1')]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 1');
     expect(ops1).toEqual([new Set([promise1])]);
     expect(ops2).toEqual([]);
     ops1 = [];
@@ -228,10 +224,7 @@ describe('ReactSuspense', () => {
     // TODO: Should be able to use `act` here.
     jest.runAllTimers();
 
-    expect(ReactNoop.getChildren()).toEqual([
-      text('Waiting Tier 2'),
-      text('Done'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 2Done');
     expect(ops1).toEqual([]);
     expect(ops2).toEqual([new Set([promise2])]);
     ops1 = [];
@@ -240,7 +233,7 @@ describe('ReactSuspense', () => {
     await resolve2();
     ReactNoop.render(element);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([text('Done'), text('Done')]);
+    expect(ReactNoop).toMatchRenderedOutput('DoneDone');
     expect(ops1).toEqual([]);
     expect(ops2).toEqual([]);
   });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index 863c9e878a2a9..76a6b7794be61 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -185,14 +185,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
   const resolveText = resolveMostRecentTextCache;
 
-  function span(prop, children = []) {
-    return {type: 'span', children, prop, hidden: false};
-  }
-
-  function spanHidden(prop, children = []) {
-    return {type: 'span', children, prop, hidden: true};
-  }
-
   function advanceTimers(ms) {
     // Note: This advances Jest's virtual time but not React's. Use
     // ReactNoop.expire for that.
@@ -278,10 +270,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outside create passive',
         'App create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Fallback'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving the suspended resource should
       await act(async () => {
@@ -299,12 +293,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inside:Before create passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Async'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.render(null);
@@ -320,7 +316,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'AsyncText:Async destroy passive',
         'Text:Outside destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     // @gate enableLegacyCache
@@ -398,12 +394,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outside create passive',
         'App create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside:Before'),
-        spanHidden('Inside:After'),
-        span('Fallback'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving the suspended resource should
       await act(async () => {
@@ -416,12 +414,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Async'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.renderLegacySyncRoot(null);
@@ -437,7 +437,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'AsyncText:Async destroy passive',
         'Text:Outside destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
   });
 
@@ -488,11 +488,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outside create passive',
         'App create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Schedule an update that causes React to suspend.
       act(() => {
@@ -512,23 +514,27 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback create layout',
         'Text:Fallback create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside:Before'),
-        spanHidden('Inside:After'),
-        span('Fallback'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
 
       await advanceTimers(1000);
 
       // Noop since sync root has already committed
       expect(Scheduler).toHaveYielded([]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside:Before'),
-        spanHidden('Inside:After'),
-        span('Fallback'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -541,12 +547,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Async'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.renderLegacySyncRoot(null);
@@ -610,11 +618,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outside create passive',
         'App create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Schedule an update that causes React to suspend.
       act(() => {
@@ -632,11 +642,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback render',
         'Text:Outside render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       await advanceTimers(1000);
 
@@ -647,12 +659,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside:Before'),
-        spanHidden('Inside:After'),
-        span('Fallback'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -669,12 +683,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Async'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.render(null);
@@ -758,11 +774,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'App create layout',
         'App create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Schedule an update that causes React to suspend.
       act(() => {
@@ -780,11 +798,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Fallback render',
         'ClassText:Outside render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
 
       await advanceTimers(1000);
 
@@ -795,12 +815,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Fallback componentDidMount',
         'ClassText:Outside componentDidUpdate',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside:Before'),
-        spanHidden('Inside:After'),
-        span('Fallback'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -816,13 +838,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Inside:After componentDidMount',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside:Before'),
-        span('Async'),
-        span('Inside:After'),
-        span('Outside'),
-      ]);
-
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
       await act(async () => {
         ReactNoop.render(null);
       });
@@ -878,7 +901,11 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outer create passive',
         'App create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Outer', [span('Inner')])]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Outer">
+          <span prop="Inner" />
+        </span>,
+      );
 
       // Schedule an update that causes React to suspend.
       act(() => {
@@ -895,7 +922,11 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inner render',
         'Text:Fallback render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Outer', [span('Inner')])]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Outer">
+          <span prop="Inner" />
+        </span>,
+      );
 
       await advanceTimers(1000);
 
@@ -906,10 +937,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer', [span('Inner')]),
-        span('Fallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="Outer">
+            <span prop="Inner" />
+          </span>
+          <span prop="Fallback" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -926,10 +961,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Async'),
-        span('Outer', [span('Inner')]),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Async" />
+          <span prop="Outer">
+            <span prop="Inner" />
+          </span>
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.render(null);
@@ -989,9 +1028,11 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outer create passive',
         'App create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer', [span('MemoizedInner')]),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Outer">
+          <span prop="MemoizedInner" />
+        </span>,
+      );
 
       // Schedule an update that causes React to suspend.
       act(() => {
@@ -1008,9 +1049,11 @@ describe('ReactSuspenseEffectsSemantics', () => {
         // Text:MemoizedInner is memoized
         'Text:Fallback render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer', [span('MemoizedInner')]),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Outer">
+          <span prop="MemoizedInner" />
+        </span>,
+      );
 
       await advanceTimers(1000);
 
@@ -1022,10 +1065,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer', [span('MemoizedInner')]),
-        span('Fallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="Outer">
+            <span prop="MemoizedInner" />
+          </span>
+          <span prop="Fallback" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -1041,10 +1088,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Async'),
-        span('Outer', [span('MemoizedInner')]),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Async" />
+          <span prop="Outer">
+            <span prop="MemoizedInner" />
+          </span>
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.render(null);
@@ -1088,7 +1139,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outer create passive',
         'Text:Inner create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Outer'), span('Inner')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" />
+        </>,
+      );
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
       act(() => {
@@ -1106,11 +1162,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:InnerFallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:InnerFallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer'),
-        spanHidden('Inner'),
-        span('InnerFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" />
+        </>,
+      );
 
       // Suspend the outer Suspense subtree (outer effects and inner fallback effects should be destroyed)
       // (This check also ensures we don't destroy effects for mounted inner fallback.)
@@ -1135,12 +1193,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:OuterFallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:OuterFallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer'),
-        spanHidden('Inner'),
-        spanHidden('InnerFallback'),
-        span('OuterFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
 
       // Show the inner Suspense subtree (no effects should be recreated)
       await act(async () => {
@@ -1152,12 +1212,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inner render',
         'AsyncText:InnerAsync_1 render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer'),
-        spanHidden('Inner'),
-        spanHidden('InnerFallback'),
-        span('OuterFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
 
       // Suspend the inner Suspense subtree (no effects should be destroyed)
       act(() => {
@@ -1177,12 +1239,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:InnerFallback render',
         'Text:OuterFallback render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer'),
-        spanHidden('Inner'),
-        spanHidden('InnerFallback'),
-        span('OuterFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
 
       // Show the outer Suspense subtree (only outer effects should be recreated)
       await act(async () => {
@@ -1201,12 +1265,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:OuterFallback destroy passive',
         'AsyncText:OuterAsync_1 create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer'),
-        span('OuterAsync_1'),
-        spanHidden('Inner'),
-        span('InnerFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_1" />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" />
+        </>,
+      );
 
       // Show the inner Suspense subtree (only inner effects should be recreated)
       await act(async () => {
@@ -1221,12 +1287,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:InnerFallback destroy passive',
         'AsyncText:InnerAsync_2 create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer'),
-        span('OuterAsync_1'),
-        span('Inner'),
-        span('InnerAsync_2'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_1" />
+          <span prop="Inner" />
+          <span prop="InnerAsync_2" />
+        </>,
+      );
 
       // Suspend the outer Suspense subtree (all effects should be destroyed)
       act(() => {
@@ -1250,13 +1318,15 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'AsyncText:InnerAsync_2 destroy layout',
         'Text:OuterFallback create layout',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer'),
-        spanHidden('OuterAsync_1'),
-        spanHidden('Inner'),
-        spanHidden('InnerAsync_2'),
-        span('OuterFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="OuterAsync_1" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerAsync_2" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
 
       // Show the outer Suspense subtree (all effects should be recreated)
       await act(async () => {
@@ -1275,12 +1345,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'AsyncText:InnerAsync_2 create layout',
         'Text:OuterFallback destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer'),
-        span('OuterAsync_2'),
-        span('Inner'),
-        span('InnerAsync_2'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_2" />
+          <span prop="Inner" />
+          <span prop="InnerAsync_2" />
+        </>,
+      );
     });
 
     // @gate enableLegacyCache
@@ -1310,7 +1382,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Outer create passive',
         'Text:Inner create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Outer'), span('Inner')]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" />
+        </>,
+      );
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
       act(() => {
@@ -1328,11 +1405,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:InnerFallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:InnerFallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer'),
-        spanHidden('Inner'),
-        span('InnerFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" />
+        </>,
+      );
 
       // Suspend the outer Suspense subtree (outer effects and inner fallback effects should be destroyed)
       // (This check also ensures we don't destroy effects for mounted inner fallback.)
@@ -1357,12 +1436,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:OuterFallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:OuterFallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer'),
-        spanHidden('Inner'),
-        spanHidden('InnerFallback'),
-        span('OuterFallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
 
       // Resolve both suspended trees.
       await act(async () => {
@@ -1384,12 +1465,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'AsyncText:OuterAsync_1 create passive',
         'AsyncText:InnerAsync_1 create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Outer'),
-        span('OuterAsync_1'),
-        span('Inner'),
-        span('InnerAsync_1'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_1" />
+          <span prop="Inner" />
+          <span prop="InnerAsync_1" />
+        </>,
+      );
     });
 
     // @gate enableLegacyCache
@@ -1427,10 +1510,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inside create passive',
         'Text:Outside create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Suspend the outer shell
       act(() => {
@@ -1445,10 +1530,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback:Outside render',
         'Text:Outside render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Timing out should commit the fallback and destroy inner layout effects.
       await advanceTimers(1000);
@@ -1461,12 +1548,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback:Inside create passive',
         'Text:Fallback:Outside create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside'),
-        span('Fallback:Inside'),
-        span('Fallback:Outside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback:Inside" />
+          <span prop="Fallback:Outside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Suspend the fallback and verify that it's effects get cleaned up as well
       act(() => {
@@ -1486,12 +1575,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback:Outside render',
         'Text:Outside render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside'),
-        span('Fallback:Inside'),
-        span('Fallback:Outside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback:Inside" />
+          <span prop="Fallback:Outside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Timing out should commit the inner fallback and destroy outer fallback layout effects.
       await advanceTimers(1000);
@@ -1502,13 +1593,15 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(Scheduler).toFlushAndYield([
         'Text:Fallback:Fallback create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside'),
-        spanHidden('Fallback:Inside'),
-        span('Fallback:Fallback'),
-        span('Fallback:Outside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback:Inside" hidden={true} />
+          <span prop="Fallback:Fallback" />
+          <span prop="Fallback:Outside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving both resources should cleanup fallback effects and recreate main effects
       await act(async () => {
@@ -1527,11 +1620,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback:Outside destroy passive',
         'AsyncText:OutsideAsync create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('OutsideAsync'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="OutsideAsync" />
+          <span prop="Outside" />
+        </>,
+      );
     });
 
     // @gate enableLegacyCache
@@ -1569,10 +1664,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inside create passive',
         'Text:Outside create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Suspend both the outer boundary and the fallback
       act(() => {
@@ -1600,12 +1697,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback:Fallback create passive',
         'Text:Fallback:Outside create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside'),
-        span('Fallback:Fallback'),
-        span('Fallback:Outside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback:Fallback" />
+          <span prop="Fallback:Outside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving the inside fallback
       await act(async () => {
@@ -1621,13 +1720,15 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback:Inside create passive',
         'AsyncText:FallbackAsync create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside'),
-        span('Fallback:Inside'),
-        span('FallbackAsync'),
-        span('Fallback:Outside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback:Inside" />
+          <span prop="FallbackAsync" />
+          <span prop="Fallback:Outside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving the outer fallback only
       await act(async () => {
@@ -1646,11 +1747,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback:Outside destroy passive',
         'AsyncText:OutsideAsync create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('OutsideAsync'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="OutsideAsync" />
+          <span prop="Outside" />
+        </>,
+      );
     });
 
     // @gate enableLegacyCache
@@ -1685,10 +1788,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inside create passive',
         'Text:Outside create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Suspending a component in the middle of the tree
       // should still properly cleanup effects deeper in the tree
@@ -1700,10 +1805,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback render',
         'Text:Outside render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Timing out should commit the inner fallback and destroy outer fallback layout effects.
       await advanceTimers(1000);
@@ -1712,11 +1819,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback create layout',
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Inside'),
-        span('Fallback'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
 
       // Resolving should cleanup.
       await act(async () => {
@@ -1728,10 +1837,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inside create layout',
         'Text:Fallback destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Inside'),
-        span('Outside'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
     });
 
     describe('that throw errors', () => {
@@ -1797,11 +1908,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Inside create passive',
           'Text:Outside create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('ThrowsInDidMount'),
-          span('Inside'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInDidMount" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Schedule an update that causes React to suspend.
         await act(async () => {
@@ -1826,12 +1939,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Fallback create layout',
           'Text:Fallback create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          spanHidden('ThrowsInDidMount'),
-          spanHidden('Inside'),
-          span('Fallback'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInDidMount" hidden={true} />
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Resolve the pending suspense and throw
         componentDidMountShouldThrow = true;
@@ -1870,7 +1985,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Error create layout',
           'Text:Error create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
       });
 
       // @gate enableLegacyCache
@@ -1933,11 +2048,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Inside create passive',
           'Text:Outside create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('ThrowsInWillUnmount'),
-          span('Inside'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInWillUnmount" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Schedule an update that suspends and triggers our error code.
         await act(async () => {
@@ -1981,7 +2098,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Error create layout',
           'Text:Error create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
       });
 
       // @gate enableLegacyCache
@@ -2047,11 +2164,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Inside create passive',
           'Text:Outside create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('ThrowsInLayoutEffect'),
-          span('Inside'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInLayoutEffect" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Schedule an update that causes React to suspend.
         await act(async () => {
@@ -2076,12 +2195,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Fallback create layout',
           'Text:Fallback create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          spanHidden('ThrowsInLayoutEffect'),
-          spanHidden('Inside'),
-          span('Fallback'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInLayoutEffect" hidden={true} />
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Resolve the pending suspense and throw
         useLayoutEffectShouldThrow = true;
@@ -2120,7 +2241,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Error create layout',
           'Text:Error create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
       });
 
       // @gate enableLegacyCache
@@ -2182,11 +2303,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Inside create passive',
           'Text:Outside create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('ThrowsInLayoutEffectDestroy'),
-          span('Inside'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInLayoutEffectDestroy" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Schedule an update that suspends and triggers our error code.
         await act(async () => {
@@ -2230,7 +2353,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Error create layout',
           'Text:Error create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
       });
     });
 
@@ -2278,10 +2401,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Class componentDidMount',
         'Text:Function create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Function'),
-        span('Class'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Class" />
+        </>,
+      );
 
       // Schedule an update that causes React to suspend.
       act(() => {
@@ -2299,10 +2424,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Class render',
         'ClassText:Fallback render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Function'),
-        span('Class'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Class" />
+        </>,
+      );
 
       await advanceTimers(1000);
 
@@ -2312,11 +2439,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Class componentWillUnmount',
         'ClassText:Fallback componentDidMount',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Function'),
-        spanHidden('Class'),
-        span('Fallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" hidden={true} />
+          <span prop="Class" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -2328,11 +2457,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Suspend:Async_2',
         'ClassText:Class render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Function'),
-        spanHidden('Class'),
-        span('Fallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" hidden={true} />
+          <span prop="Class" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -2351,12 +2482,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'AsyncText:Async_1 create passive',
         'AsyncText:Async_2 create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Function'),
-        span('Async_1'),
-        span('Async_2'),
-        span('Class'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Async_1" />
+          <span prop="Async_2" />
+          <span prop="Class" />
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.render(null);
@@ -2427,11 +2560,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Class componentDidMount',
         'Text:Function create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Function'),
-        span('Suspender'),
-        span('Class'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Suspender" />
+          <span prop="Class" />
+        </>,
+      );
 
       // Schedule an update that causes React to suspend.
       textToRead = 'A';
@@ -2445,11 +2580,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Class render',
         'ClassText:Fallback render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Function'),
-        span('Suspender'),
-        span('Class'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Suspender" />
+          <span prop="Class" />
+        </>,
+      );
 
       await advanceTimers(1000);
 
@@ -2459,12 +2596,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'ClassText:Class componentWillUnmount',
         'ClassText:Fallback componentDidMount',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Function'),
-        spanHidden('Suspender'),
-        spanHidden('Class'),
-        span('Fallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" hidden={true} />
+          <span prop="Suspender" hidden={true} />
+          <span prop="Class" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       textToRead = 'B';
@@ -2477,12 +2616,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Suspend:B',
         'ClassText:Class render',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Function'),
-        spanHidden('Suspender'),
-        spanHidden('Class'),
-        span('Fallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" hidden={true} />
+          <span prop="Suspender" hidden={true} />
+          <span prop="Class" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -2496,11 +2637,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Function create layout',
         'ClassText:Class componentDidMount',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Function'),
-        span('Suspender'),
-        span('Class'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Suspender" />
+          <span prop="Class" />
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.render(null);
@@ -2609,7 +2752,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerOuter refCallback value? true',
         'RefCheckerOuter create layout refObject? true refCallback? true',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
       act(() => {
@@ -2630,7 +2773,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback create layout',
         'Text:Fallback create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -2643,7 +2786,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
 
       await act(async () => {
         ReactNoop.renderLegacySyncRoot(null);
@@ -2656,7 +2799,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerInner:refCallback destroy layout ref? false',
         'AsyncText:Async destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     // @gate enableLegacyCache
@@ -2685,10 +2828,12 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerOuter refCallback value? true',
         'RefCheckerOuter create layout refObject? true refCallback? true',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('refObject'),
-        span('refCallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="refObject" />
+          <span prop="refCallback" />
+        </>,
+      );
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
       act(() => {
@@ -2710,11 +2855,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerInner:refCallback destroy layout ref? false',
         'Text:Fallback create layout',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('refObject'),
-        spanHidden('refCallback'),
-        span('Fallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="refObject" hidden={true} />
+          <span prop="refCallback" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -2735,11 +2882,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Async'),
-        span('refObject'),
-        span('refCallback'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Async" />
+          <span prop="refObject" />
+          <span prop="refCallback" />
+        </>,
+      );
 
       await act(async () => {
         ReactNoop.render(null);
@@ -2752,7 +2901,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerInner:refCallback destroy layout ref? false',
         'AsyncText:Async destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     // @gate enableLegacyCache
@@ -2792,7 +2941,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerOuter refCallback value? true',
         'RefCheckerOuter create layout refObject? true refCallback? true',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
       act(() => {
@@ -2816,7 +2965,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerInner:refCallback destroy layout ref? false',
         'Text:Fallback create layout',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -2839,7 +2988,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
 
       await act(async () => {
         ReactNoop.render(null);
@@ -2852,7 +3001,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerInner:refCallback destroy layout ref? false',
         'AsyncText:Async destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     // @gate enableLegacyCache
@@ -2896,7 +3045,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerOuter refCallback value? true',
         'RefCheckerOuter create layout refObject? true refCallback? true',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
       act(() => {
@@ -2920,7 +3069,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerInner:refCallback destroy layout ref? false',
         'Text:Fallback create layout',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -2943,7 +3092,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
 
       await act(async () => {
         ReactNoop.render(null);
@@ -2956,7 +3105,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefCheckerInner:refCallback destroy layout ref? false',
         'AsyncText:Async destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     // @gate enableLegacyCache
@@ -3009,7 +3158,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefChecker create layout ref? true',
         'App create layout ref? true',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
       act(() => {
@@ -3026,7 +3175,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefChecker destroy layout ref? true',
         'Text:Fallback create layout',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
 
       // Resolving the suspended resource should re-create inner layout effects.
       await act(async () => {
@@ -3042,7 +3191,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Fallback destroy passive',
         'AsyncText:Async create passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
 
       await act(async () => {
         ReactNoop.render(null);
@@ -3053,7 +3202,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'RefChecker destroy layout ref? true',
         'AsyncText:Async destroy passive',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
     describe('that throw errors', () => {
@@ -3115,11 +3264,13 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Inside create passive',
           'Text:Outside create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('ThrowsInRefCallback'),
-          span('Inside'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInRefCallback" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Schedule an update that causes React to suspend.
         await act(async () => {
@@ -3144,12 +3295,14 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Fallback create layout',
           'Text:Fallback create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          spanHidden('ThrowsInRefCallback'),
-          spanHidden('Inside'),
-          span('Fallback'),
-          span('Outside'),
-        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInRefCallback" hidden={true} />
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
 
         // Resolve the pending suspense and throw
         useRefCallbackShouldThrow = true;
@@ -3188,7 +3341,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'Text:Error create layout',
           'Text:Error create passive',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
       });
     });
   });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
index 8284383c5f6ca..41c27c4c922e2 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
@@ -127,10 +127,6 @@ describe('ReactSuspenseFallback', () => {
     return <span prop={fullText} />;
   }
 
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
   // @gate enableLegacyCache
   it('suspends and shows fallback', () => {
     ReactNoop.render(
@@ -140,7 +136,7 @@ describe('ReactSuspenseFallback', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
   });
 
   // @gate enableLegacyCache
@@ -155,7 +151,7 @@ describe('ReactSuspenseFallback', () => {
       'Suspend! [A]',
       // null
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   // @gate enableLegacyCache
@@ -170,7 +166,7 @@ describe('ReactSuspenseFallback', () => {
       'Suspend! [A]',
       // null
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   // @gate enableLegacyCache
@@ -184,7 +180,7 @@ describe('ReactSuspenseFallback', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
   });
 
   // @gate enableLegacyCache
@@ -201,7 +197,7 @@ describe('ReactSuspenseFallback', () => {
       'Suspend! [A]',
       // null
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 
   // @gate enableLegacyCache
@@ -218,6 +214,6 @@ describe('ReactSuspenseFallback', () => {
       'Suspend! [A]',
       // null
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 9d95a57572f50..aad8729adde1c 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -157,14 +157,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   const rejectText = rejectMostRecentTextCache;
 
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
-  function hiddenSpan(prop) {
-    return {type: 'span', children: [], prop, hidden: true};
-  }
-
   function advanceTimers(ms) {
     // Note: This advances Jest's virtual time but not React's. Use
     // ReactNoop.expire for that.
@@ -231,7 +223,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'C',
       // We leave D incomplete.
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Flush the promise completely
     await resolveText('A');
@@ -239,11 +231,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Even though the promise has resolved, we should now flush
     // and commit the in progress render instead of restarting.
     expect(Scheduler).toFlushAndYield(['D']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Loading...'),
-      span('C'),
-      span('D'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading..." />
+        <span prop="C" />
+        <span prop="D" />
+      </>,
+    );
 
     // Await one micro task to attach the retry listeners.
     await null;
@@ -251,12 +245,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Next, we'll flush the complete content.
     expect(Scheduler).toFlushAndYield(['Bar', 'A', 'B']);
 
-    expect(ReactNoop.getChildren()).toEqual([
-      span('A'),
-      span('B'),
-      span('C'),
-      span('D'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+        <span prop="C" />
+        <span prop="D" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -301,13 +297,18 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'B',
       'Loading...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Resolve the data
     await resolveText('A');
     // Renders successfully
     expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -329,24 +330,36 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Suspend! [B]',
       'Loading B...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Loading A...'),
-      span('Loading B...'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading A..." />
+        <span prop="Loading B..." />
+      </>,
+    );
 
     // Resolve first Suspense's promise so that it switches switches back to the
     // normal view. The second Suspense should still show the placeholder.
     await resolveText('A');
 
     expect(Scheduler).toFlushAndYield(['A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Loading B..." />
+      </>,
+    );
 
     // Resolve the second Suspense's promise so that it switches back to the
     // normal view.
     await resolveText('B');
 
     expect(Scheduler).toFlushAndYield(['B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -385,18 +398,20 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading...',
     ]);
     // Did not commit yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Wait for data to resolve
     await resolveText('B');
     // Renders successfully
     expect(Scheduler).toFlushAndYield(['A', 'B', 'C', 'D']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('A'),
-      span('B'),
-      span('C'),
-      span('D'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+        <span prop="C" />
+        <span prop="D" />
+      </>,
+    );
   });
 
   // Second condition is redundant but guarantees that the test runs in prod.
@@ -435,7 +450,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     ReactNoop.render(<App />);
     expect(Scheduler).toFlushAndYield([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       React.startTransition(() => {
@@ -445,7 +460,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.render(<App renderContent={true} />);
     }
     expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     await rejectText('Result', new Error('Failed to load: Result'));
 
@@ -458,9 +473,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Errored again on retry. Now handle it.
       'Caught error: Failed to load: Result',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Caught error: Failed to load: Result'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught error: Failed to load: Result" />,
+    );
   });
 
   // Second condition is redundant but guarantees that the test runs in prod.
@@ -497,7 +512,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     ReactNoop.render(<App />);
     expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     await rejectText('Result', new Error('Failed to load: Result'));
 
@@ -510,9 +525,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Errored again on retry. Now handle it.
       'Caught error: Failed to load: Result',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Caught error: Failed to load: Result'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught error: Failed to load: Result" />,
+    );
   });
 
   // @gate enableLegacyCache
@@ -531,7 +546,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['A', 'Suspend! [1]', 'Loading...']);
     await resolveText('1');
     expect(Scheduler).toFlushAndYield(['A', '1']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('1')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="1" />
+      </>,
+    );
 
     // Update the low-pri text
     ReactNoop.render(<App highPri="A" lowPri="2" />);
@@ -548,11 +568,21 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.render(<App highPri="B" lowPri="1" />);
     });
     expect(Scheduler).toHaveYielded(['B', '1']);
-    expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="1" />
+      </>,
+    );
 
     // Unblock the low-pri text and finish
     await resolveText('2');
-    expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="1" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -571,7 +601,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     ReactNoop.render(<App showA={false} showB={false} />);
     expect(Scheduler).toFlushAndYield([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       React.startTransition(() => {
@@ -581,7 +611,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.render(<App showA={true} showB={false} />);
     }
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance React's virtual time by enough to fall into a new async bucket,
     // but not enough to expire the suspense timeout.
@@ -594,11 +624,16 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.render(<App showA={true} showB={true} />);
     }
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'B', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     await resolveText('A');
     expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -628,7 +663,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // but we have another pending update that we can work on
       '(empty)',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="(empty)" />);
   });
 
   // Note: This test was written to test a heuristic used in the expiration
@@ -735,7 +770,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Sync',
     ]);
     // The update hasn't expired yet, so we commit nothing.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance both React's virtual time and Jest's timers by enough to expire
     // the update.
@@ -745,12 +780,22 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // the placeholder.
     expect(Scheduler).toHaveYielded([]);
     // Should have committed the placeholder.
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading..." />
+        <span prop="Sync" />
+      </>,
+    );
 
     // Once the promise resolves, we render the suspended view
     await resolveText('Async');
     expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Async" />
+        <span prop="Sync" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -779,10 +824,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading outer...',
     ]);
     // The outer loading state finishes immediately.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Loading outer...'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Loading outer..." />
+      </>,
+    );
 
     // Resolve the outer promise.
     await resolveText('Outer content');
@@ -792,30 +839,36 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading inner...',
     ]);
     // Don't commit the inner placeholder yet.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Loading outer...'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Loading outer..." />
+      </>,
+    );
 
     // Expire the inner timeout.
     ReactNoop.expire(500);
     await advanceTimers(500);
     // Now that 750ms have elapsed since the outer placeholder timed out,
     // we can timeout the inner placeholder.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Outer content'),
-      span('Loading inner...'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Outer content" />
+        <span prop="Loading inner..." />
+      </>,
+    );
 
     // Finally, flush the inner promise. We should see the complete screen.
     await resolveText('Inner content');
     expect(Scheduler).toFlushAndYield(['Inner content']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Outer content'),
-      span('Inner content'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Outer content" />
+        <span prop="Inner content" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -841,12 +894,22 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Sync',
     ]);
     // The tree commits synchronously
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading..." />
+        <span prop="Sync" />
+      </>,
+    );
 
     // Once the promise resolves, we render the suspended view
     await resolveText('Async');
     expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Async" />
+        <span prop="Sync" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -870,7 +933,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading (outer)...',
     ]);
     // The tree commits synchronously
-    expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading (outer)..." />);
   });
 
   // @gate enableLegacyCache
@@ -899,7 +962,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Sync',
     ]);
     // The update hasn't expired yet, so we commit nothing.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance both React's virtual time and Jest's timers by enough to trigger
     // the timeout, but not by enough to flush the promise or reach the true
@@ -907,12 +970,22 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.expire(2000);
     await advanceTimers(2000);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading..." />
+        <span prop="Sync" />
+      </>,
+    );
 
     // Once the promise resolves, we render the suspended view
     await resolveText('Async');
     expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Async" />
+        <span prop="Sync" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -943,22 +1016,27 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Sync',
     ]);
     // The update hasn't expired yet, so we commit nothing.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance both React's virtual time and Jest's timers,
     // but not by enough to flush the promise or reach the true expiration time.
     ReactNoop.expire(2000);
     await advanceTimers(2000);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Even flushing won't yield a fallback in a transition.
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Once the promise resolves, we render the suspended view
     await resolveText('Async');
     expect(Scheduler).toFlushAndYield(['Async', 'Sync']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Async" />
+        <span prop="Sync" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -1038,13 +1116,18 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Suspend! [B]',
       'Loading...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     await resolveText('A');
     await resolveText('B');
 
     expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -1068,13 +1151,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     }
     expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Resolve the promise
     await resolveText('Async');
     // We can now resume rendering
     expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
   });
 
   // @gate enableLegacyCache
@@ -1100,32 +1183,32 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     React.startTransition(() => ReactNoop.render(<App text="A" />));
     // The update should suspend.
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('S')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
 
     // Advance time until right before it expires.
     await advanceTimers(4999);
     ReactNoop.expire(4999);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('S')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
 
     // Schedule another low priority update.
     React.startTransition(() => ReactNoop.render(<App text="B" />));
     // This update should also suspend.
     expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('S')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
 
     // Schedule a regular update. Its expiration time will fall between
     // the expiration times of the previous two updates.
     ReactNoop.render(<App text="C" />);
     expect(Scheduler).toFlushAndYield(['C']);
-    expect(ReactNoop.getChildren()).toEqual([span('C')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="C" />);
 
     // Flush the remaining work.
     await resolveText('A');
     await resolveText('B');
     // Nothing else to render.
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('C')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="C" />);
   });
 
   // TODO: This test was written against the old Expiration Times
@@ -1166,13 +1249,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading...',
       'Commit: goodbye',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     await resolveText('goodbye');
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     expect(Scheduler).toFlushAndYield(['goodbye']);
-    expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="goodbye" />);
   });
 
   // @gate enableLegacyCache
@@ -1231,14 +1314,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Times out immediately, ignoring the specified threshold.
       ReactNoop.renderLegacySyncRoot(<App />);
       expect(Scheduler).toHaveYielded(['Suspend! [Result]', 'Loading...']);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
       await act(async () => {
         resolveText('Result');
       });
 
       expect(Scheduler).toHaveYielded(['Result']);
-      expect(ReactNoop.getChildren()).toEqual([span('Result')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Result" />);
     });
 
     // @gate enableLegacyCache
@@ -1420,7 +1503,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Suspend! [Hi]',
         'Loading...',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
       await act(async () => {
         resolveText('Hi');
@@ -1431,7 +1514,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Hi',
         'componentDidMount',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Hi" />);
     });
 
     // @gate enableLegacyCache
@@ -1468,12 +1551,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // Re-render due to lifecycle update
         'Loading...',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
       await act(async () => {
         resolveText('Hi');
       });
       expect(Scheduler).toHaveYielded(['Hi']);
-      expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Hi" />);
     });
 
     if (global.__PERSISTENT__) {
@@ -1891,7 +1974,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading...',
     ]);
     // We're now suspended and we haven't shown anything yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Flush some of the time
     Scheduler.unstable_advanceTime(450);
@@ -1899,7 +1982,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Because we've already been waiting for so long we can
     // wait a bit longer. Still nothing...
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Eventually we'll show the fallback.
     Scheduler.unstable_advanceTime(500);
@@ -1908,9 +1991,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushWithoutYielding();
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       // Since this is a transition, we never fallback.
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     } else {
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
     }
 
     // Flush the promise completely
@@ -1922,7 +2005,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     } else {
       expect(Scheduler).toFlushAndYield(['A']);
     }
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
   });
 
   // @gate enableLegacyCache
@@ -1950,7 +2033,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading more...',
       'Loading...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     await resolveText('A');
     // Wait a long time.
@@ -1967,16 +2050,23 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Because we've already been waiting for so long we've exceeded
     // our threshold and we show the next level immediately.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('A'),
-      span('Loading more...'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Loading more..." />
+      </>,
+    );
 
     // Flush the last promise completely
     await resolveText('B');
     // Renders successfully
     expect(Scheduler).toFlushAndYield(['B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -2004,7 +2094,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading more...',
       'Loading...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     await resolveText('A');
 
@@ -2017,16 +2107,21 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
     // Because we've already been waiting for so long we can
     // wait a bit longer. Still nothing...
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     await resolveText('B');
 
     // Before we commit another Promise resolves.
     // We're still showing the first loading state.
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
     // Restart and render the complete content.
     expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -2063,7 +2158,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
 
     // We're now suspended and we haven't shown anything yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Flush some of the time
     Scheduler.unstable_advanceTime(500);
@@ -2076,9 +2171,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushWithoutYielding();
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       // Transitions never fallback.
-      expect(ReactNoop.getChildren()).toEqual([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
     } else {
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
     }
   });
 
@@ -2273,12 +2368,17 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'B',
       'Initial load...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Initial load...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Initial load..." />);
 
     // Eventually we resolve and show the data.
     await resolveText('A');
     expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
 
     // Update to show C
     ReactNoop.render(<Foo showC={true} />);
@@ -2294,16 +2394,24 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await advanceTimers(600);
     // Since the optional suspense boundary is already showing its content,
     // we have to use the inner fallback instead.
-    expect(ReactNoop.getChildren()).toEqual([
-      hiddenSpan('A'),
-      span('Updating...'),
-      span('B'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" hidden={true} />
+        <span prop="Updating..." />
+        <span prop="B" />
+      </>,
+    );
 
     // Later we load the data.
     await resolveText('C');
     expect(Scheduler).toFlushAndYield(['A', 'C']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="C" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -2328,12 +2436,17 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'B',
       // null
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
 
     // Eventually we resolve and show the data.
     await resolveText('A');
     expect(Scheduler).toFlushAndYield(['A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
 
     // Update to show C
     ReactNoop.render(<Foo showC={true} />);
@@ -2347,12 +2460,23 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Flush to skip suspended time.
     Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
-    expect(ReactNoop.getChildren()).toEqual([hiddenSpan('A'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" hidden={true} />
+        <span prop="B" />
+      </>,
+    );
 
     // Later we load the data.
     await resolveText('C');
     expect(Scheduler).toFlushAndYield(['A', 'C']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="C" />
+        <span prop="B" />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache
@@ -2384,7 +2508,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
 
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Loading B..." />
+      </>,
+    );
   });
 
   // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
@@ -2411,7 +2540,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYield(['Foo', 'A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       React.startTransition(() => {
@@ -2428,7 +2557,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading B...',
     ]);
     // Still suspended.
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
     // Flush to skip suspended time.
     Scheduler.unstable_advanceTime(600);
@@ -2436,12 +2565,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       // Transitions never fall back.
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
     } else {
-      expect(ReactNoop.getChildren()).toEqual([
-        span('A'),
-        span('Loading B...'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="Loading B..." />
+        </>,
+      );
     }
   });
 
@@ -2465,7 +2596,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYield(['Foo', 'A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       React.startTransition(() => {
@@ -2482,7 +2613,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Null
     ]);
     // Still suspended.
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
     // Flush to skip suspended time.
     Scheduler.unstable_advanceTime(600);
@@ -2490,9 +2621,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       // Transitions never fall back.
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
     } else {
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
     }
   });
 
@@ -2520,7 +2651,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A...']);
     // We're still suspended.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Schedule an update at idle pri.
     ReactNoop.idleUpdates(() => ReactNoop.render(<Foo renderContent={2} />));
@@ -2528,20 +2659,20 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield([]);
 
     // We're still suspended.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance time a little bit.
     Scheduler.unstable_advanceTime(150);
     await advanceTimers(150);
 
     // We should not have committed yet because we had a long suspense time.
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Flush to skip suspended time.
     Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
 
-    expect(ReactNoop.getChildren()).toEqual([span('Loading A...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading A..." />);
   });
 
   describe('startTransition', () => {
@@ -2562,12 +2693,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Only a short time is needed to unsuspend the initial loading state.
       Scheduler.unstable_advanceTime(400);
       await advanceTimers(400);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
       // Later we load the data.
       await resolveText('A');
       expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
       // Start transition.
       React.startTransition(() => ReactNoop.render(<App page="B" />));
@@ -2577,11 +2708,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await advanceTimers(100000);
       // Even after lots of time has passed, we have still not yet flushed the
       // loading state.
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
       // Later we load the data.
       await resolveText('B');
       expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
     });
 
     // @gate enableLegacyCache
@@ -2611,13 +2742,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // Only a short time is needed to unsuspend the initial loading state.
         Scheduler.unstable_advanceTime(400);
         await advanceTimers(400);
-        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
       });
 
       // Later we load the data.
       await resolveText('A');
       expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
       // Start transition.
       await act(async () => {
@@ -2628,12 +2759,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         await advanceTimers(100000);
         // Even after lots of time has passed, we have still not yet flushed the
         // loading state.
-        expect(ReactNoop.getChildren()).toEqual([span('A')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
       });
       // Later we load the data.
       await resolveText('B');
       expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
     });
 
     // @gate enableLegacyCache
@@ -2666,13 +2797,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // Only a short time is needed to unsuspend the initial loading state.
         Scheduler.unstable_advanceTime(400);
         await advanceTimers(400);
-        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
       });
 
       // Later we load the data.
       await resolveText('A');
       expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
       // Start transition.
       await act(async () => {
@@ -2683,12 +2814,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         await advanceTimers(100000);
         // Even after lots of time has passed, we have still not yet flushed the
         // loading state.
-        expect(ReactNoop.getChildren()).toEqual([span('A')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
       });
       // Later we load the data.
       await resolveText('B');
       expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
     });
   });
 
@@ -2710,12 +2841,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Only a short time is needed to unsuspend the initial loading state.
       Scheduler.unstable_advanceTime(400);
       await advanceTimers(400);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
       // Later we load the data.
       await resolveText('A');
       expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
       // Start transition.
       React.startTransition(() => ReactNoop.render(<App page="B" />));
@@ -2725,12 +2856,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await advanceTimers(2999);
       // Since the timeout is infinite (or effectively infinite),
       // we have still not yet flushed the loading state.
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
       // Later we load the data.
       await resolveText('B');
       expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
 
       // Start a long (infinite) transition.
       React.startTransition(() => ReactNoop.render(<App page="C" />));
@@ -2740,7 +2871,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // loading state.
       Scheduler.unstable_advanceTime(100000);
       await advanceTimers(100000);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
     });
 
     // @gate enableLegacyCache
@@ -2770,13 +2901,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // Only a short time is needed to unsuspend the initial loading state.
         Scheduler.unstable_advanceTime(400);
         await advanceTimers(400);
-        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
       });
 
       // Later we load the data.
       await resolveText('A');
       expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
       // Start transition.
       await act(async () => {
@@ -2788,13 +2919,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         await advanceTimers(2999);
         // Since the timeout is infinite (or effectively infinite),
         // we have still not yet flushed the loading state.
-        expect(ReactNoop.getChildren()).toEqual([span('A')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
       });
 
       // Later we load the data.
       await resolveText('B');
       expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
 
       // Start a long (infinite) transition.
       await act(async () => {
@@ -2806,7 +2937,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // loading state.
         Scheduler.unstable_advanceTime(100000);
         await advanceTimers(100000);
-        expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
       });
     });
 
@@ -2840,13 +2971,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // Only a short time is needed to unsuspend the initial loading state.
         Scheduler.unstable_advanceTime(400);
         await advanceTimers(400);
-        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
       });
 
       // Later we load the data.
       await resolveText('A');
       expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
       // Start transition.
       await act(async () => {
@@ -2857,13 +2988,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         await advanceTimers(2999);
         // Since the timeout is infinite (or effectively infinite),
         // we have still not yet flushed the loading state.
-        expect(ReactNoop.getChildren()).toEqual([span('A')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
       });
 
       // Later we load the data.
       await resolveText('B');
       expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
 
       // Start a long (infinite) transition.
       await act(async () => {
@@ -2875,7 +3006,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // loading state.
         Scheduler.unstable_advanceTime(100000);
         await advanceTimers(100000);
-        expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
       });
     });
   });
@@ -2900,7 +3031,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [A]', 'Loading...']);
     await resolveText('A');
     expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
 
     // Start transition.
     React.startTransition(() => ReactNoop.render(<App page="B" />));
@@ -2908,12 +3044,22 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
 
     // Suspended
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
     Scheduler.unstable_advanceTime(1800);
     await advanceTimers(1800);
     expect(Scheduler).toFlushAndYield([]);
     // We should still be suspended here because this loading state should be avoided.
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
     await resolveText('B');
     expect(Scheduler).toFlushAndYield(['Hi!', 'B']);
     expect(ReactNoop).toMatchRenderedOutput(
@@ -2946,7 +3092,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Initial render.
     ReactNoop.render(<App page="A" />);
     expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
 
     // Start transition.
     React.startTransition(() => ReactNoop.render(<App page="B" />));
@@ -2954,7 +3105,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
 
     // Suspended
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
     Scheduler.unstable_advanceTime(1800);
     await advanceTimers(1800);
     expect(Scheduler).toFlushAndYield([]);
diff --git a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
index 5ebfcf5626843..c2f58292deb65 100644
--- a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
+++ b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
@@ -42,10 +42,6 @@ describe('useEffectEvent', () => {
     useMemo = React.useMemo;
   });
 
-  function span(prop) {
-    return {type: 'span', hidden: false, children: [], prop};
-  }
-
   function Text(props) {
     Scheduler.unstable_yieldValue(props.text);
     return <span prop={props.text} />;
@@ -77,17 +73,21 @@ describe('useEffectEvent', () => {
     const button = React.createRef(null);
     ReactNoop.render(<Counter incrementBy={1} />);
     expect(Scheduler).toFlushAndYield(['Increment', 'Count: 0']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 0'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 0" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded(['Increment', 'Count: 1']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 1'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 1" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded([
@@ -95,26 +95,32 @@ describe('useEffectEvent', () => {
       // Event should use the updated callback function closed over the new value.
       'Count: 2',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 2'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
 
     // Increase the increment prop amount
     ReactNoop.render(<Counter incrementBy={10} />);
     expect(Scheduler).toFlushAndYield(['Increment', 'Count: 2']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 2'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
 
     // Event uses the new prop
     act(button.current.increment);
     expect(Scheduler).toHaveYielded(['Increment', 'Count: 12']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 12'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 12" />
+      </>,
+    );
   });
 
   // @gate enableUseEffectEventHook
@@ -153,24 +159,30 @@ describe('useEffectEvent', () => {
     const button = React.createRef(null);
     ReactNoop.render(<Counter incrementBy={5} />);
     expect(Scheduler).toFlushAndYield(['Increment', 'Count: 0']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 0'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 0" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded(['Increment', 'Count: 5']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 5'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 5" />
+      </>,
+    );
 
     act(button.current.multiply);
     expect(Scheduler).toHaveYielded(['Increment', 'Count: 25']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 25'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 25" />
+      </>,
+    );
   });
 
   // @gate enableUseEffectEventHook
@@ -206,20 +218,24 @@ describe('useEffectEvent', () => {
     const button = React.createRef(null);
     ReactNoop.render(<Greeter hello={'hej'} />);
     expect(Scheduler).toFlushAndYield(['Say hej', 'Greeting: Seb says hej']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Say hej'),
-      span('Greeting: Seb says hej'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Say hej" />
+        <span prop="Greeting: Seb says hej" />
+      </>,
+    );
 
     act(button.current.greet);
     expect(Scheduler).toHaveYielded([
       'Say hej',
       'Greeting: undefined says hej',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Say hej'),
-      span('Greeting: undefined says hej'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Say hej" />
+        <span prop="Greeting: undefined says hej" />
+      </>,
+    );
   });
 
   // @gate enableUseEffectEventHook
@@ -299,10 +315,12 @@ describe('useEffectEvent', () => {
       'Increment',
       'Count: 2',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 2'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded([
@@ -310,10 +328,12 @@ describe('useEffectEvent', () => {
       // Effect should not re-run because the dependency hasn't changed.
       'Count: 3',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 3'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 3" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded([
@@ -321,10 +341,12 @@ describe('useEffectEvent', () => {
       // Event should use the updated callback function closed over the new value.
       'Count: 4',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 4'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 4" />
+      </>,
+    );
 
     // Increase the increment prop amount
     ReactNoop.render(<Counter incrementBy={10} />);
@@ -335,18 +357,22 @@ describe('useEffectEvent', () => {
       'Increment',
       'Count: 24',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 24'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 24" />
+      </>,
+    );
 
     // Event uses the new prop
     act(button.current.increment);
     expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 34'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 34" />
+      </>,
+    );
   });
 
   // @gate enableUseEffectEventHook
@@ -388,10 +414,12 @@ describe('useEffectEvent', () => {
       'Increment',
       'Count: 2',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 2'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded([
@@ -399,10 +427,12 @@ describe('useEffectEvent', () => {
       // Effect should not re-run because the dependency hasn't changed.
       'Count: 3',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 3'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 3" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded([
@@ -410,10 +440,12 @@ describe('useEffectEvent', () => {
       // Event should use the updated callback function closed over the new value.
       'Count: 4',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 4'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 4" />
+      </>,
+    );
 
     // Increase the increment prop amount
     ReactNoop.render(<Counter incrementBy={10} />);
@@ -424,18 +456,22 @@ describe('useEffectEvent', () => {
       'Increment',
       'Count: 24',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 24'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 24" />
+      </>,
+    );
 
     // Event uses the new prop
     act(button.current.increment);
     expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 34'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 34" />
+      </>,
+    );
   });
 
   // @gate enableUseEffectEventHook
@@ -483,10 +519,12 @@ describe('useEffectEvent', () => {
       'Increment',
       'Count: 2',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 2'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded([
@@ -494,10 +532,12 @@ describe('useEffectEvent', () => {
       // Effect should not re-run because the dependency hasn't changed.
       'Count: 3',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 3'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 3" />
+      </>,
+    );
 
     act(button.current.increment);
     expect(Scheduler).toHaveYielded([
@@ -505,10 +545,12 @@ describe('useEffectEvent', () => {
       // Event should use the updated callback function closed over the new value.
       'Count: 4',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 4'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 4" />
+      </>,
+    );
 
     // Increase the increment prop amount
     ReactNoop.render(<Counter incrementBy={10} />);
@@ -519,18 +561,22 @@ describe('useEffectEvent', () => {
       'Increment',
       'Count: 24',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 24'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 24" />
+      </>,
+    );
 
     // Event uses the new prop
     act(button.current.increment);
     expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Increment'),
-      span('Count: 34'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 34" />
+      </>,
+    );
   });
 
   // @gate enableUseEffectEventHook
@@ -693,9 +739,9 @@ describe('useEffectEvent', () => {
 
     act(() => ReactNoop.render(<ChatRoom roomId="general" theme="light" />));
     expect(Scheduler).toHaveYielded(['Welcome to the general room!']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Welcome to the general room!'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the general room!" />,
+    );
 
     jest.advanceTimersByTime(100);
     Scheduler.unstable_advanceTime(100);
@@ -704,9 +750,9 @@ describe('useEffectEvent', () => {
     // change roomId only
     act(() => ReactNoop.render(<ChatRoom roomId="music" theme="light" />));
     expect(Scheduler).toHaveYielded(['Welcome to the music room!']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Welcome to the music room!'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the music room!" />,
+    );
     jest.advanceTimersByTime(100);
     Scheduler.unstable_advanceTime(100);
     // should trigger a reconnect
@@ -715,9 +761,9 @@ describe('useEffectEvent', () => {
     // change theme only
     act(() => ReactNoop.render(<ChatRoom roomId="music" theme="dark" />));
     expect(Scheduler).toHaveYielded(['Welcome to the music room!']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Welcome to the music room!'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the music room!" />,
+    );
     jest.advanceTimersByTime(100);
     Scheduler.unstable_advanceTime(100);
     // should not trigger a reconnect
@@ -726,9 +772,9 @@ describe('useEffectEvent', () => {
     // change roomId only
     act(() => ReactNoop.render(<ChatRoom roomId="travel" theme="dark" />));
     expect(Scheduler).toHaveYielded(['Welcome to the travel room!']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Welcome to the travel room!'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the travel room!" />,
+    );
     jest.advanceTimersByTime(100);
     Scheduler.unstable_advanceTime(100);
     // should trigger a reconnect

From 28fcae062bff2b611cd935911f8666b0627b9551 Mon Sep 17 00:00:00 2001
From: Aravind D <aravindrndv8@gmail.com>
Date: Thu, 9 Feb 2023 18:17:50 +0530
Subject: [PATCH 9/9] Add support for SVG `transformOrigin` prop (#26130)

Co-authored-by: eps1lon <silbermann.sebastian@gmail.com>
---
 .../AttributeTableSnapshot.md                 | 52 ++++++++++++++++++-
 fixtures/attribute-behavior/src/attributes.js | 10 ++++
 .../src/shared/DOMProperty.js                 |  1 +
 .../src/shared/possibleStandardNames.js       |  2 +
 4 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index 93ae5b010bc90..559a82fa4fa05 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -1,4 +1,4 @@
-## `about` (on `<div>` inside `<div>`)
+## `about` (on `<div>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `about=(string)`| (changed)| `"a string"` |
@@ -11373,6 +11373,56 @@
 | `transform=(null)`| (initial)| `[]` |
 | `transform=(undefined)`| (initial)| `[]` |
 
+## `transform-origin` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `transform-origin=(string)`| (changed, warning)| `"a string"` |
+| `transform-origin=(empty string)`| (changed, warning)| `<empty string>` |
+| `transform-origin=(array with string)`| (changed, warning)| `"string"` |
+| `transform-origin=(empty array)`| (changed, warning)| `<empty string>` |
+| `transform-origin=(object)`| (changed, warning)| `"result of toString()"` |
+| `transform-origin=(numeric string)`| (changed, warning)| `"42"` |
+| `transform-origin=(-1)`| (changed, warning)| `"-1"` |
+| `transform-origin=(0)`| (changed, warning)| `"0"` |
+| `transform-origin=(integer)`| (changed, warning)| `"1"` |
+| `transform-origin=(NaN)`| (changed, warning)| `"NaN"` |
+| `transform-origin=(float)`| (changed, warning)| `"99.99"` |
+| `transform-origin=(true)`| (initial, warning)| `<null>` |
+| `transform-origin=(false)`| (initial, warning)| `<null>` |
+| `transform-origin=(string 'true')`| (changed, warning)| `"true"` |
+| `transform-origin=(string 'false')`| (changed, warning)| `"false"` |
+| `transform-origin=(string 'on')`| (changed, warning)| `"on"` |
+| `transform-origin=(string 'off')`| (changed, warning)| `"off"` |
+| `transform-origin=(symbol)`| (initial, warning)| `<null>` |
+| `transform-origin=(function)`| (initial, warning)| `<null>` |
+| `transform-origin=(null)`| (initial, warning)| `<null>` |
+| `transform-origin=(undefined)`| (initial, warning)| `<null>` |
+
+## `transformOrigin` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `transformOrigin=(string)`| (changed)| `"a string"` |
+| `transformOrigin=(empty string)`| (changed)| `<empty string>` |
+| `transformOrigin=(array with string)`| (changed)| `"string"` |
+| `transformOrigin=(empty array)`| (changed)| `<empty string>` |
+| `transformOrigin=(object)`| (changed)| `"result of toString()"` |
+| `transformOrigin=(numeric string)`| (changed)| `"42"` |
+| `transformOrigin=(-1)`| (changed)| `"-1"` |
+| `transformOrigin=(0)`| (changed)| `"0"` |
+| `transformOrigin=(integer)`| (changed)| `"1"` |
+| `transformOrigin=(NaN)`| (changed, warning)| `"NaN"` |
+| `transformOrigin=(float)`| (changed)| `"99.99"` |
+| `transformOrigin=(true)`| (initial, warning)| `<null>` |
+| `transformOrigin=(false)`| (initial, warning)| `<null>` |
+| `transformOrigin=(string 'true')`| (changed)| `"true"` |
+| `transformOrigin=(string 'false')`| (changed)| `"false"` |
+| `transformOrigin=(string 'on')`| (changed)| `"on"` |
+| `transformOrigin=(string 'off')`| (changed)| `"off"` |
+| `transformOrigin=(symbol)`| (initial, warning)| `<null>` |
+| `transformOrigin=(function)`| (initial, warning)| `<null>` |
+| `transformOrigin=(null)`| (initial)| `<null>` |
+| `transformOrigin=(undefined)`| (initial)| `<null>` |
+
 ## `type` (on `<button>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js
index b84a0d11da3b8..c0e5a133f1dce 100644
--- a/fixtures/attribute-behavior/src/attributes.js
+++ b/fixtures/attribute-behavior/src/attributes.js
@@ -1981,6 +1981,16 @@ const attributes = [
     overrideStringValue:
       'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
   },
+  {
+    name: 'transform-origin',
+    tagName: 'svg',
+    read: getSVGAttribute('transform-origin'),
+  },
+  {
+    name: 'transformOrigin',
+    tagName: 'svg',
+    read: getSVGAttribute('transform-origin'),
+  },
   {name: 'type', tagName: 'button', overrideStringValue: 'reset'},
   {
     name: 'type',
diff --git a/packages/react-dom-bindings/src/shared/DOMProperty.js b/packages/react-dom-bindings/src/shared/DOMProperty.js
index 1c73df1a6c288..9e7b7bf6771b5 100644
--- a/packages/react-dom-bindings/src/shared/DOMProperty.js
+++ b/packages/react-dom-bindings/src/shared/DOMProperty.js
@@ -521,6 +521,7 @@ const capitalize = (token: string) => token[1].toUpperCase();
   'text-anchor',
   'text-decoration',
   'text-rendering',
+  'transform-origin',
   'underline-position',
   'underline-thickness',
   'unicode-bidi',
diff --git a/packages/react-dom-bindings/src/shared/possibleStandardNames.js b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
index e1b76a0978baa..bd093192a3d32 100644
--- a/packages/react-dom-bindings/src/shared/possibleStandardNames.js
+++ b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
@@ -421,6 +421,8 @@ const possibleStandardNames = {
   'text-rendering': 'textRendering',
   to: 'to',
   transform: 'transform',
+  transformorigin: 'transformOrigin',
+  'transform-origin': 'transformOrigin',
   typeof: 'typeof',
   u1: 'u1',
   u2: 'u2',