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/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-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-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-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 70c2420b0df18..c2203146862b1 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);
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/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/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-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);
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/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',
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/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
index c829166ecb2d3..d74d7f287dd56 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
@@ -14,6 +14,7 @@ let JSDOM;
 let Stream;
 let Scheduler;
 let React;
+let ReactDOM;
 let ReactDOMClient;
 let ReactDOMFizzServer;
 let document;
@@ -29,6 +30,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');
@@ -1008,4 +1010,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;
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-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 8e5a36a997af5..1d6ab92a49b56 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 77d83f5043f78..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.
@@ -190,18 +182,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   }
 
-  function removeNonEnumerableProperties(input) {
-    if (Array.isArray(input)) {
-      input = input.map(item => removeNonEnumerableProperties(item));
-    } else if (typeof input === 'object') {
-      input = Object.keys(input).reduce((obj, key) => {
-        obj[key] = removeNonEnumerableProperties(input[key]);
-        return obj;
-      }, {});
-    }
-    return input;
-  }
-
   // @gate enableLegacyCache
   it('does not restart rendering for initial render', async () => {
     function Bar(props) {
@@ -243,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');
@@ -251,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;
@@ -263,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
@@ -313,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
@@ -341,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
@@ -397,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.
@@ -447,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(() => {
@@ -457,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'));
 
@@ -470,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.
@@ -509,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'));
 
@@ -522,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
@@ -543,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" />);
@@ -560,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
@@ -583,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(() => {
@@ -593,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.
@@ -606,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
@@ -640,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
@@ -747,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.
@@ -757,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
@@ -791,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');
@@ -804,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
@@ -853,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
@@ -882,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
@@ -911,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
@@ -919,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
@@ -955,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
@@ -1050,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
@@ -1080,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
@@ -1112,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
@@ -1178,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
@@ -1243,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
@@ -1432,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');
@@ -1443,7 +1514,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Hi',
         'componentDidMount',
       ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Hi" />);
     });
 
     // @gate enableLegacyCache
@@ -1480,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__) {
@@ -1903,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);
@@ -1911,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);
@@ -1920,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
@@ -1934,7 +2005,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     } else {
       expect(Scheduler).toFlushAndYield(['A']);
     }
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
   });
 
   // @gate enableLegacyCache
@@ -1962,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.
@@ -1979,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
@@ -2016,7 +2094,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading more...',
       'Loading...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
 
     await resolveText('A');
 
@@ -2029,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
@@ -2075,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);
@@ -2088,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..." />);
     }
   });
 
@@ -2285,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} />);
@@ -2306,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
@@ -2340,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} />);
@@ -2359,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
@@ -2396,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
@@ -2423,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(() => {
@@ -2440,9 +2557,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading B...',
     ]);
     // Still suspended.
-    expect(removeNonEnumerableProperties(ReactNoop.getChildren())).toEqual([
-      span('A'),
-    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
 
     // Flush to skip suspended time.
     Scheduler.unstable_advanceTime(600);
@@ -2450,14 +2565,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       // Transitions never fall back.
-      expect(removeNonEnumerableProperties(ReactNoop.getChildren())).toEqual([
-        span('A'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
     } else {
-      expect(removeNonEnumerableProperties(ReactNoop.getChildren())).toEqual([
-        span('A'),
-        span('Loading B...'),
-      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="Loading B..." />
+        </>,
+      );
     }
   });
 
@@ -2481,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(() => {
@@ -2498,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);
@@ -2506,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" />);
     }
   });
 
@@ -2536,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} />));
@@ -2544,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', () => {
@@ -2578,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" />));
@@ -2593,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
@@ -2627,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 () => {
@@ -2644,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
@@ -2682,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 () => {
@@ -2699,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" />);
     });
   });
 
@@ -2726,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" />));
@@ -2741,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" />));
@@ -2756,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
@@ -2786,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 () => {
@@ -2804,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 () => {
@@ -2822,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" />);
       });
     });
 
@@ -2856,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 () => {
@@ -2873,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 () => {
@@ -2891,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" />);
       });
     });
   });
@@ -2916,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" />));
@@ -2924,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(
@@ -2962,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" />));
@@ -2970,10 +3105,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
 
     // Suspended
-    expect(removeNonEnumerableProperties(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
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-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/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 f6e63c2d9519a..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 *******/
   {
@@ -950,7 +981,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 +1024,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,
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: [
diff --git a/yarn.lock b/yarn.lock
index 623c3ca158170..58e75cf7a6ff7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5556,6 +5556,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"