Add ReactDOMClient to ServerIntegrationReconnecting (#28136)

rickhanlonii · web-flow · commit 4bd5e3ea5c44 · 2024-02-01T18:32:38.000-05:00
## Overview Branched off #28130 ## Why In #24276 we changed the new root behavior to error when a client-render is forced for certain cases, so these now expect a mismatch even though they're using `suppressHydrationWarning`.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js
@@ -13,30 +13,30 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
-function initModules() {
-  // Reset warning cache.
-  jest.resetModules();
-
-  React = require('react');
-  ReactDOM = require('react-dom');
-  ReactDOMServer = require('react-dom/server');
-  ReactTestUtils = require('react-dom/test-utils');
-
-  // Make them available to the helpers.
-  return {
-    ReactDOM,
-    ReactDOMServer,
-    ReactTestUtils,
-  };
-}
-
-const {resetModules, expectMarkupMismatch, expectMarkupMatch} =
-  ReactDOMServerIntegrationUtils(initModules);
-
 describe('ReactDOMServerIntegration', () => {
+  function initModules() {
+    // Reset warning cache.
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    ReactTestUtils = require('react-dom/test-utils');
+
+    // Make them available to the helpers.
+    return {
+      ReactDOMClient,
+      ReactDOMServer,
+      ReactTestUtils,
+    };
+  }
+
+  const {resetModules, expectMarkupMismatch, expectMarkupMatch} =
+    ReactDOMServerIntegrationUtils(initModules);
   beforeEach(() => {
     resetModules();
   });
@@ -123,8 +123,8 @@ describe('ReactDOMServerIntegration', () => {
       it('should error reconnecting different attribute values', () =>
         expectMarkupMismatch(<div id="foo" />, <div id="bar" />));
 
-      it('can explicitly ignore errors reconnecting different element types of children', () =>
-        expectMarkupMatch(
+      it('should error reconnecting different element types of children', () =>
+        expectMarkupMismatch(
           <div>
             <div />
           </div>,
@@ -354,8 +354,8 @@ describe('ReactDOMServerIntegration', () => {
           <div>{''}</div>,
         ));
 
-      it('can explicitly ignore reconnecting more children', () =>
-        expectMarkupMatch(
+      it('can not ignore reconnecting more children', () =>
+        expectMarkupMismatch(
           <div>
             <div />
           </div>,
@@ -365,8 +365,8 @@ describe('ReactDOMServerIntegration', () => {
           </div>,
         ));
 
-      it('can explicitly ignore reconnecting fewer children', () =>
-        expectMarkupMatch(
+      it('can not ignore reconnecting fewer children', () =>
+        expectMarkupMismatch(
           <div>
             <div />
             <div />
@@ -376,8 +376,8 @@ describe('ReactDOMServerIntegration', () => {
           </div>,
         ));
 
-      it('can explicitly ignore reconnecting reordered children', () =>
-        expectMarkupMatch(
+      it('can not ignore reconnecting reordered children', () =>
+        expectMarkupMismatch(
           <div suppressHydrationWarning={true}>
             <div />
             <span />
@@ -456,3 +456,73 @@ describe('ReactDOMServerIntegration', () => {
       ));
   });
 });
+
+describe('ReactDOMServerIntegration (legacy)', () => {
+  function initModules() {
+    // Reset warning cache.
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+    ReactTestUtils = require('react-dom/test-utils');
+
+    // Make them available to the helpers.
+    return {
+      ReactDOM,
+      ReactDOMServer,
+      ReactTestUtils,
+    };
+  }
+
+  const {resetModules, expectMarkupMatch} =
+    ReactDOMServerIntegrationUtils(initModules);
+
+  beforeEach(() => {
+    resetModules();
+  });
+
+  it('legacy mode can explicitly ignore errors reconnecting different element types of children', () =>
+    expectMarkupMatch(
+      <div>
+        <div />
+      </div>,
+      <div suppressHydrationWarning={true}>
+        <span />
+      </div>,
+    ));
+
+  it('legacy mode can explicitly ignore reconnecting more children', () =>
+    expectMarkupMatch(
+      <div>
+        <div />
+      </div>,
+      <div suppressHydrationWarning={true}>
+        <div />
+        <div />
+      </div>,
+    ));
+
+  it('legacy mode can explicitly ignore reconnecting fewer children', () =>
+    expectMarkupMatch(
+      <div>
+        <div />
+        <div />
+      </div>,
+      <div suppressHydrationWarning={true}>
+        <div />
+      </div>,
+    ));
+
+  it('legacy mode can explicitly ignore reconnecting reordered children', () =>
+    expectMarkupMatch(
+      <div suppressHydrationWarning={true}>
+        <div />
+        <span />
+      </div>,
+      <div suppressHydrationWarning={true}>
+        <span />
+        <div />
+      </div>,
+    ));
+});
