Add ReactDOMClient to ServerIntegrationSelect

packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js

@@ -15,21 +15,21 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js

@@ -13,21 +13,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js

@@ -13,21 +13,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js

@@ -15,21 +15,21 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js

@@ -13,21 +13,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js

@@ -12,21 +12,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js

@@ -13,21 +13,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };
@@ -253,7 +253,7 @@ describe('ReactDOMServerIntegrationSelect', () => {
  <option value="first">First</option>
  <option value="true">True</option>
  </select>,
- 1,
+ 2,
  );
  expect(e.firstChild.selected).toBe(false);
  expect(e.lastChild.selected).toBe(true);
@@ -268,7 +268,7 @@ describe('ReactDOMServerIntegrationSelect', () => {
  <option value="first">First</option>
  <option value="undefined">Undefined</option>
  </select>,
- 1,
+ 2,
  );
  expect(e.firstChild.selected).toBe(true);
  expect(e.lastChild.selected).toBe(false);

packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js

@@ -13,7 +13,7 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 let forwardRef;
@@ -26,7 +26,7 @@ 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');
  forwardRef = React.forwardRef;
@@ -44,7 +44,7 @@ function initModules() {
 
  // Make them available to the helpers.
  return {
- ReactDOM,
+ ReactDOMClient,
  ReactDOMServer,
  ReactTestUtils,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js

@@ -13,21 +13,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js

@@ -12,21 +12,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js

@@ -13,21 +13,21 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
 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,
  };

packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js

@@ -14,11 +14,12 @@ const shouldIgnoreConsoleError = require('../../../../../scripts/jest/shouldIgno
 
 module.exports = function (initModules) {
  let ReactDOM;
+ let ReactDOMClient;
  let ReactDOMServer;
  let act;
 
  function resetModules() {
- ({ReactDOM, ReactDOMServer} = initModules());
+ ({ReactDOM, ReactDOMClient, ReactDOMServer} = initModules());
  act = require('internal-test-utils').act;
  }
 
@@ -51,11 +52,24 @@ module.exports = function (initModules) {
  async function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
  if (forceHydrate) {
  await act(() => {
- ReactDOM.hydrate(reactElement, domElement);
+ if (ReactDOMClient) {
+ ReactDOMClient.hydrateRoot(domElement, reactElement, {
+ onRecoverableError: () => {
+ // TODO: assert on recoverable error count.
+ },
+ });
+ } else {
+ ReactDOM.hydrate(reactElement, domElement);
+ }
  });
  } else {
  await act(() => {
- ReactDOM.render(reactElement, domElement);
+ if (ReactDOMClient) {
+ const root = ReactDOMClient.createRoot(domElement);
+ root.render(reactElement);
+ } else {
+ ReactDOM.render(reactElement, domElement);
+ }
  });
  }
  }
@@ -80,7 +94,11 @@ module.exports = function (initModules) {
  for (let i = 0; i < console.error.mock.calls.length; i++) {
  const args = console.error.mock.calls[i];
  const [format, ...rest] = args;
- if (!shouldIgnoreConsoleError(format, rest)) {
+ if (
+ !shouldIgnoreConsoleError(format, rest, {
+ TODO_ignoreHydrationErrors: true,
+ })
+ ) {
  filteredWarnings.push(args);
  }
  }

scripts/jest/shouldIgnoreConsoleError.js

@@ -1,6 +1,10 @@
 'use strict';
 
-module.exports = function shouldIgnoreConsoleError(format, args) {
+module.exports = function shouldIgnoreConsoleError(
+ format,
+ args,
+ {TODO_ignoreHydrationErrors} = {TODO_ignoreHydrationErrors: false}
+) {
  if (__DEV__) {
  if (typeof format === 'string') {
  if (format.indexOf('Error: Uncaught [') === 0) {
@@ -23,6 +27,15 @@ module.exports = function shouldIgnoreConsoleError(format, args) {
  // We haven't finished migrating our tests to use createRoot.
  return true;
  }
+ if (
+ TODO_ignoreHydrationErrors &&
+ format.indexOf(
+ 'An error occurred during hydration. The server HTML was replaced with client content in'
+ ) !== -1
+ ) {
+ // This also gets logged by onRecoverableError, so we can ignore it.
+ return true;
+ }
  } else if (
  format != null &&
  typeof format.message === 'string' &&