From a00853786b5a87bd8a77372b3fa299d0a25ca963 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 1 Feb 2024 18:32:27 -0500
Subject: [PATCH] Add ReactDOMClient to ServerIntegration(Hooks|NewContext)
 (#28135)

## Overview

Branched off https://github.com/facebook/react/pull/28130

### ~Failing~ Fixed by @eps1lon
Most of the tests pass, but there are 3 tests that have additional
warnings due to client render error retries.

For example, before we would log:

```
Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.
Warning: Expected server HTML to contain a matching text node for "0" in <div>.
```

And now we log

```
Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.
Warning: Expected server HTML to contain a matching text node for "0" in <div>.
Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.
```

We can't just update the expected error count for these tests, because
the additional error only happens on the client. So I need some guidance
on how to fix these.

---------

Co-authored-by: Sebastian Silbermann <sebastian.silbermann@klarna.com>
---
 .../ReactDOMServerIntegrationHooks-test.js    | 40 ++++++++++++++-----
 ...eactDOMServerIntegrationNewContext-test.js | 28 +++++++++----
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index 08f0b1a8a7de8..7e46bea5f93d9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -15,7 +15,7 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 let useState;
@@ -39,7 +39,7 @@ 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');
   useState = React.useState;
@@ -67,14 +67,19 @@ function initModules() {
 
   // Make them available to the helpers.
   return {
-    ReactDOM,
+    ReactDOMClient,
     ReactDOMServer,
     ReactTestUtils,
   };
 }
 
-const {resetModules, itRenders, itThrowsWhenRendering, serverRender} =
-  ReactDOMServerIntegrationUtils(initModules);
+const {
+  resetModules,
+  itRenders,
+  itThrowsWhenRendering,
+  clientRenderOnBadMarkup,
+  serverRender,
+} = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerHooks', () => {
   beforeEach(() => {
@@ -422,8 +427,13 @@ describe('ReactDOMServerHooks', () => {
         });
         return 'hi';
       }
-
-      const domNode = await render(<App />, 1);
+      const domNode = await render(
+        <App />,
+        render === clientRenderOnBadMarkup
+          ? // On hydration mismatch we retry and therefore log the warning again.
+            2
+          : 1,
+      );
       expect(domNode.textContent).toEqual('hi');
     });
 
@@ -436,7 +446,13 @@ describe('ReactDOMServerHooks', () => {
         return value;
       }
 
-      const domNode = await render(<App />, 1);
+      const domNode = await render(
+        <App />,
+        render === clientRenderOnBadMarkup
+          ? // On hydration mismatch we retry and therefore log the warning again.
+            2
+          : 1,
+      );
       expect(domNode.textContent).toEqual('0');
     });
   });
@@ -859,7 +875,13 @@ describe('ReactDOMServerHooks', () => {
         return <Text text={count} />;
       }
 
-      const domNode1 = await render(<ReadInMemo />, 1);
+      const domNode1 = await render(
+        <ReadInMemo />,
+        render === clientRenderOnBadMarkup
+          ? // On hydration mismatch we retry and therefore log the warning again.
+            2
+          : 1,
+      );
       expect(domNode1.textContent).toEqual('42');
 
       const domNode2 = await render(<ReadInReducer />, 1);
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
index cfcfc323e1d3d..cf0167eef1fd2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -13,7 +13,7 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
@@ -21,19 +21,20 @@ function initModules() {
   // Reset warning cache.
   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');
 
   // Make them available to the helpers.
   return {
-    ReactDOM,
+    ReactDOMClient,
     ReactDOMServer,
     ReactTestUtils,
   };
 }
 
-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+const {resetModules, itRenders, clientRenderOnBadMarkup} =
+  ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegration', () => {
   beforeEach(() => {
@@ -365,8 +366,13 @@ describe('ReactDOMServerIntegration', () => {
             </div>
           );
         };
-        // We expect 1 error.
-        await render(<App />, 1);
+        await render(
+          <App />,
+          render === clientRenderOnBadMarkup
+            ? // On hydration mismatch we retry and therefore log the warning again.
+              2
+            : 1,
+        );
       },
     );
 
@@ -391,8 +397,14 @@ describe('ReactDOMServerIntegration', () => {
             </div>
           );
         };
-        // We expect 1 error.
-        await render(<App />, 1);
+
+        await render(
+          <App />,
+          render === clientRenderOnBadMarkup
+            ? // On hydration mismatch we retry and therefore log the warning again.
+              2
+            : 1,
+        );
       },
     );