Add ReactDOMClient to ServerIntegrationTestUtils (#28130)
## Overview Adds support for `ReactDOMClient` for `ServerIntegration*` tests. Also converts tests that pass without any other changes. Will follow up with other PRs for more complex cases.
Ricky committed
Feb 1, 2024 at 18:26 UTC
6054be9c86f2e01e5e24c1fe2182479fec8667e4
12 files changed
+66
-35
packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js
+3
-3
@@ -15,7 +15,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
15
const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
16
17
let React;
18
-let ReactDOM;
18
+let ReactDOMClient;
19
let ReactDOMServer;
20
let ReactTestUtils;
21
@@ -23,13 +23,13 @@ function initModules() {
23
// Reset warning cache.
24
jest.resetModules();
25
React = require('react');
26
- ReactDOM = require('react-dom');
26
+ ReactDOMClient = require('react-dom/client');
27
ReactDOMServer = require('react-dom/server');
28
ReactTestUtils = require('react-dom/test-utils');
29
30
// Make them available to the helpers.
31
return {
32
- ReactDOM,
32
+ ReactDOMClient,
33
ReactDOMServer,
34
ReactTestUtils,
35
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
+3
-3
@@ -13,7 +13,7 @@
13
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
14
15
let React;
16
-let ReactDOM;
16
+let ReactDOMClient;
17
let ReactDOMServer;
18
let ReactTestUtils;
19
@@ -21,13 +21,13 @@ function initModules() {
21
// Reset warning cache.
22
jest.resetModules();
23
React = require('react');
24
- ReactDOM = require('react-dom');
24
+ ReactDOMClient = require('react-dom/client');
25
ReactDOMServer = require('react-dom/server');
26
ReactTestUtils = require('react-dom/test-utils');
27
28
// Make them available to the helpers.
29
return {
30
- ReactDOM,
30
+ ReactDOMClient,
31
ReactDOMServer,
32
ReactTestUtils,
33
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
+3
-3
@@ -13,7 +13,7 @@
13
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
14
15
let React;
16
-let ReactDOM;
16
+let ReactDOMClient;
17
let ReactDOMServer;
18
let ReactTestUtils;
19
@@ -21,13 +21,13 @@ function initModules() {
21
// Reset warning cache.
22
jest.resetModules();
23
React = require('react');
24
- ReactDOM = require('react-dom');
24
+ ReactDOMClient = require('react-dom/client');
25
ReactDOMServer = require('react-dom/server');
26
ReactTestUtils = require('react-dom/test-utils');
27
28
// Make them available to the helpers.
29
return {
30
- ReactDOM,
30
+ ReactDOMClient,
31
ReactDOMServer,
32
ReactTestUtils,
33
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
+3
-3
@@ -15,7 +15,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
15
const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
16
17
let React;
18
-let ReactDOM;
18
+let ReactDOMClient;
19
let ReactDOMServer;
20
let ReactTestUtils;
21
@@ -23,13 +23,13 @@ function initModules() {
23
// Reset warning cache.
24
jest.resetModules();
25
React = require('react');
26
- ReactDOM = require('react-dom');
26
+ ReactDOMClient = require('react-dom/client');
27
ReactDOMServer = require('react-dom/server');
28
ReactTestUtils = require('react-dom/test-utils');
29
30
// Make them available to the helpers.
31
return {
32
- ReactDOM,
32
+ ReactDOMClient,
33
ReactDOMServer,
34
ReactTestUtils,
35
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
+3
-3
@@ -13,7 +13,7 @@
13
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
14
15
let React;
16
-let ReactDOM;
16
+let ReactDOMClient;
17
let ReactDOMServer;
18
let ReactTestUtils;
19
@@ -21,13 +21,13 @@ function initModules() {
21
// Reset warning cache.
22
jest.resetModules();
23
React = require('react');
24
- ReactDOM = require('react-dom');
24
+ ReactDOMClient = require('react-dom/client');
25
ReactDOMServer = require('react-dom/server');
26
ReactTestUtils = require('react-dom/test-utils');
27
28
// Make them available to the helpers.
29
return {
30
- ReactDOM,
30
+ ReactDOMClient,
31
ReactDOMServer,
32
ReactTestUtils,
33
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
+3
-3
@@ -12,7 +12,7 @@
12
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
13
14
let React;
15
-let ReactDOM;
15
+let ReactDOMClient;
16
let ReactDOMServer;
17
let ReactTestUtils;
18
@@ -20,13 +20,13 @@ function initModules() {
20
// Reset warning cache.
21
jest.resetModules();
22
React = require('react');
23
- ReactDOM = require('react-dom');
23
+ ReactDOMClient = require('react-dom/client');
24
ReactDOMServer = require('react-dom/server');
25
ReactTestUtils = require('react-dom/test-utils');
26
27
// Make them available to the helpers.
28
return {
29
- ReactDOM,
29
+ ReactDOMClient,
30
ReactDOMServer,
31
ReactTestUtils,
32
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js
+3
-3
@@ -13,7 +13,7 @@
13
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
14
15
let React;
16
-let ReactDOM;
16
+let ReactDOMClient;
17
let ReactDOMServer;
18
let ReactTestUtils;
19
let forwardRef;
@@ -26,7 +26,7 @@ function initModules() {
26
// Reset warning cache.
27
jest.resetModules();
28
React = require('react');
29
- ReactDOM = require('react-dom');
29
+ ReactDOMClient = require('react-dom/client');
30
ReactDOMServer = require('react-dom/server');
31
ReactTestUtils = require('react-dom/test-utils');
32
forwardRef = React.forwardRef;
@@ -44,7 +44,7 @@ function initModules() {
44
45
// Make them available to the helpers.
46
return {
47
- ReactDOM,
47
+ ReactDOMClient,
48
ReactDOMServer,
49
ReactTestUtils,
50
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
+3
-3
@@ -13,7 +13,7 @@
13
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
14
15
let React;
16
-let ReactDOM;
16
+let ReactDOMClient;
17
let ReactDOMServer;
18
let ReactTestUtils;
19
@@ -21,13 +21,13 @@ function initModules() {
21
// Reset warning cache.
22
jest.resetModules();
23
React = require('react');
24
- ReactDOM = require('react-dom');
24
+ ReactDOMClient = require('react-dom/client');
25
ReactDOMServer = require('react-dom/server');
26
ReactTestUtils = require('react-dom/test-utils');
27
28
// Make them available to the helpers.
29
return {
30
- ReactDOM,
30
+ ReactDOMClient,
31
ReactDOMServer,
32
ReactTestUtils,
33
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
+3
-3
@@ -12,7 +12,7 @@
12
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
13
14
let React;
15
-let ReactDOM;
15
+let ReactDOMClient;
16
let ReactDOMServer;
17
let ReactTestUtils;
18
@@ -20,13 +20,13 @@ function initModules() {
20
// Reset warning cache.
21
jest.resetModules();
22
React = require('react');
23
- ReactDOM = require('react-dom');
23
+ ReactDOMClient = require('react-dom/client');
24
ReactDOMServer = require('react-dom/server');
25
ReactTestUtils = require('react-dom/test-utils');
26
27
// Make them available to the helpers.
28
return {
29
- ReactDOM,
29
+ ReactDOMClient,
30
ReactDOMServer,
31
ReactTestUtils,
32
};
packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js
+3
-3
@@ -13,7 +13,7 @@
13
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
14
15
let React;
16
-let ReactDOM;
16
+let ReactDOMClient;
17
let ReactDOMServer;
18
let ReactTestUtils;
19
@@ -21,13 +21,13 @@ function initModules() {
21
// Reset warning cache.
22
jest.resetModules();
23
React = require('react');
24
- ReactDOM = require('react-dom');
24
+ ReactDOMClient = require('react-dom/client');
25
ReactDOMServer = require('react-dom/server');
26
ReactTestUtils = require('react-dom/test-utils');
27
28
// Make them available to the helpers.
29
return {
30
- ReactDOM,
30
+ ReactDOMClient,
31
ReactDOMServer,
32
ReactTestUtils,
33
};
packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+22
-4
@@ -14,11 +14,12 @@ const shouldIgnoreConsoleError = require('../../../../../scripts/jest/shouldIgno
14
15
module.exports = function (initModules) {
16
let ReactDOM;
17
+ let ReactDOMClient;
18
let ReactDOMServer;
19
let act;
20
21
function resetModules() {
21
- ({ReactDOM, ReactDOMServer} = initModules());
22
+ ({ReactDOM, ReactDOMClient, ReactDOMServer} = initModules());
23
act = require('internal-test-utils').act;
24
}
25
@@ -51,11 +52,24 @@ module.exports = function (initModules) {
52
async function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
53
if (forceHydrate) {
54
await act(() => {
54
- ReactDOM.hydrate(reactElement, domElement);
55
+ if (ReactDOMClient) {
56
+ ReactDOMClient.hydrateRoot(domElement, reactElement, {
57
+ onRecoverableError: () => {
58
+ // TODO: assert on recoverable error count.
59
+ },
60
+ });
61
+ } else {
62
+ ReactDOM.hydrate(reactElement, domElement);
63
+ }
64
});
65
} else {
66
await act(() => {
58
- ReactDOM.render(reactElement, domElement);
67
+ if (ReactDOMClient) {
68
+ const root = ReactDOMClient.createRoot(domElement);
69
+ root.render(reactElement);
70
+ } else {
71
+ ReactDOM.render(reactElement, domElement);
72
+ }
73
});
74
}
75
}
@@ -80,7 +94,11 @@ module.exports = function (initModules) {
94
for (let i = 0; i < console.error.mock.calls.length; i++) {
95
const args = console.error.mock.calls[i];
96
const [format, ...rest] = args;
83
- if (!shouldIgnoreConsoleError(format, rest)) {
97
+ if (
98
+ !shouldIgnoreConsoleError(format, rest, {
99
+ TODO_ignoreHydrationErrors: true,
100
+ })
101
+ ) {
102
filteredWarnings.push(args);
103
}
104
}
scripts/jest/shouldIgnoreConsoleError.js
+14
-1
@@ -1,6 +1,10 @@
1
'use strict';
2
3
-module.exports = function shouldIgnoreConsoleError(format, args) {
3
+module.exports = function shouldIgnoreConsoleError(
4
+ format,
5
+ args,
6
+ {TODO_ignoreHydrationErrors} = {TODO_ignoreHydrationErrors: false}
7
+) {
8
if (__DEV__) {
9
if (typeof format === 'string') {
10
if (format.indexOf('Error: Uncaught [') === 0) {
@@ -23,6 +27,15 @@ module.exports = function shouldIgnoreConsoleError(format, args) {
27
// We haven't finished migrating our tests to use createRoot.
28
return true;
29
}
30
+ if (
31
+ TODO_ignoreHydrationErrors &&
32
+ format.indexOf(
33
+ 'An error occurred during hydration. The server HTML was replaced with client content in'
34
+ ) !== -1
35
+ ) {
36
+ // This also gets logged by onRecoverableError, so we can ignore it.
37
+ return true;
38
+ }
39
} else if (
40
format != null &&
41
typeof format.message === 'string' &&