From 5e275884ad749e42fb2da81092c1d63a423719eb Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 8 Feb 2023 11:51:21 +0100
Subject: [PATCH] Prefer JSX for ReactNoop assertions

---
 packages/react-noop-renderer/src/ReactNoop.js |   2 +
 .../src/ReactNoopPersistent.js                |   2 +
 .../src/createReactNoop.js                    |  26 +-
 .../src/__tests__/ReactExpiration-test.js     |  24 +-
 .../src/__tests__/ReactFragment-test.js       | 164 +--
 .../ReactHooksWithNoopRenderer-test.js        | 427 ++++----
 ...tIncrementalErrorHandling-test.internal.js | 207 ++--
 .../ReactIncrementalScheduling-test.js        |  12 +-
 .../ReactIncrementalSideEffects-test.js       | 454 +++++----
 .../ReactIncrementalTriangle-test.js          |   5 +-
 .../__tests__/ReactIncrementalUpdates-test.js |  24 +-
 .../src/__tests__/ReactMemo-test.js           |  34 +-
 .../src/__tests__/ReactNewContext-test.js     | 180 ++--
 .../__tests__/ReactNoopRendererAct-test.js    |   2 +-
 .../src/__tests__/ReactPersistent-test.js     |  24 +-
 .../__tests__/ReactSuspenseCallback-test.js   |  25 +-
 .../ReactSuspenseEffectsSemantics-test.js     | 937 ++++++++++--------
 .../__tests__/ReactSuspenseFallback-test.js   |  16 +-
 .../ReactSuspenseWithNoopRenderer-test.js     | 514 ++++++----
 .../src/__tests__/useEffectEvent-test.js      | 278 +++---
 20 files changed, 1985 insertions(+), 1372 deletions(-)

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