From f946f515260d55d35fc1cb743820c270f8816bc3 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 2 Feb 2024 13:58:03 -0800
Subject: [PATCH] Update ReactDOMServerSuspense-test to not use legacy
 rendering APIs

Updates ReactDOMServerSuspense-test to not use legacy rendering APIs
Also removes an experimental only gate that is not necessary
---
 .../ReactDOMServerSuspense-test.internal.js   | 132 +++++++++---------
 1 file changed, 64 insertions(+), 68 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 2a0e1f68a72b2..094e4576a72ba 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -12,7 +12,6 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
 let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
@@ -24,7 +23,6 @@ function initModules() {
   jest.resetModules();
 
   React = require('react');
-  ReactDOM = require('react-dom');
   ReactDOMClient = require('react-dom/client');
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
@@ -35,13 +33,13 @@ function initModules() {
 
   // Make them available to the helpers.
   return {
-    ReactDOM,
+    ReactDOMClient,
     ReactDOMServer,
     ReactTestUtils,
   };
 }
 
-const {itThrowsWhenRendering, resetModules, serverRender} =
+const {resetModules, itThrowsWhenRendering} =
   ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerSuspense', () => {
@@ -97,42 +95,42 @@ describe('ReactDOMServerSuspense', () => {
   }
 
   it('should render the children when no promise is thrown', async () => {
-    const c = await serverRender(
-      <div>
-        <React.Suspense fallback={<Text text="Fallback" />}>
-          <Text text="Children" />
-        </React.Suspense>
-      </div>,
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(
+      <React.Suspense fallback={<Text text="Fallback" />}>
+        <Text text="Children" />
+      </React.Suspense>,
     );
-    expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
+    container.innerHTML = html;
+    expect(getVisibleChildren(container)).toEqual(<div>Children</div>);
   });
 
   it('should render the fallback when a promise thrown', async () => {
-    const c = await serverRender(
-      <div>
-        <React.Suspense fallback={<Text text="Fallback" />}>
-          <AsyncText text="Children" />
-        </React.Suspense>
-      </div>,
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(
+      <React.Suspense fallback={<Text text="Fallback" />}>
+        <AsyncText text="Children" />
+      </React.Suspense>,
     );
-    expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
+    container.innerHTML = html;
+    expect(getVisibleChildren(container)).toEqual(<div>Fallback</div>);
   });
 
   it('should work with nested suspense components', async () => {
-    const c = await serverRender(
-      <div>
-        <React.Suspense fallback={<Text text="Fallback" />}>
-          <div>
-            <Text text="Children" />
-            <React.Suspense fallback={<Text text="Fallback" />}>
-              <AsyncText text="Children" />
-            </React.Suspense>
-          </div>
-        </React.Suspense>
-      </div>,
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(
+      <React.Suspense fallback={<Text text="Fallback" />}>
+        <div>
+          <Text text="Children" />
+          <React.Suspense fallback={<Text text="Fallback" />}>
+            <AsyncText text="Children" />
+          </React.Suspense>
+        </div>
+      </React.Suspense>,
     );
+    container.innerHTML = html;
 
-    expect(getVisibleChildren(c)).toEqual(
+    expect(getVisibleChildren(container)).toEqual(
       <div>
         <div>Children</div>
         <div>Fallback</div>
@@ -152,56 +150,54 @@ describe('ReactDOMServerSuspense', () => {
         </React.Suspense>
       </SuspenseList>
     );
-    const element = await serverRender(example);
-    const parent = element.parentNode;
-    const divA = parent.children[0];
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(example);
+    container.innerHTML = html;
+
+    const divA = container.children[0];
     expect(divA.tagName).toBe('DIV');
     expect(divA.textContent).toBe('A');
-    const divB = parent.children[1];
+    const divB = container.children[1];
     expect(divB.tagName).toBe('DIV');
     expect(divB.textContent).toBe('B');
 
     await act(() => {
-      ReactDOMClient.hydrateRoot(parent, example);
+      ReactDOMClient.hydrateRoot(container, example);
     });
 
-    const parent2 = element.parentNode;
-    const divA2 = parent2.children[0];
-    const divB2 = parent2.children[1];
+    const divA2 = container.children[0];
+    const divB2 = container.children[1];
     expect(divA).toBe(divA2);
     expect(divB).toBe(divB2);
   });
 
-  // TODO: Remove this in favor of @gate pragma
-  if (__EXPERIMENTAL__) {
-    itThrowsWhenRendering(
-      'a suspending component outside a Suspense node',
-      async render => {
-        await render(
-          <div>
-            <React.Suspense />
-            <AsyncText text="Children" />
-            <React.Suspense />
-          </div>,
-          1,
-        );
-      },
-      'A component suspended while responding to synchronous input.',
-    );
-
-    itThrowsWhenRendering(
-      'a suspending component without a Suspense above',
-      async render => {
-        await render(
-          <div>
-            <AsyncText text="Children" />
-          </div>,
-          1,
-        );
-      },
-      'A component suspended while responding to synchronous input.',
-    );
-  }
+  itThrowsWhenRendering(
+    'a suspending component outside a Suspense node',
+    async render => {
+      await render(
+        <div>
+          <React.Suspense />
+          <AsyncText text="Children" />
+          <React.Suspense />
+        </div>,
+        1,
+      );
+    },
+    'A component suspended while responding to synchronous input.',
+  );
+
+  itThrowsWhenRendering(
+    'a suspending component without a Suspense above',
+    async render => {
+      await render(
+        <div>
+          <AsyncText text="Children" />
+        </div>,
+        1,
+      );
+    },
+    'A component suspended while responding to synchronous input.',
+  );
 
   it('does not get confused by throwing null', () => {
     function Bad() {