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>
Ricky committed
Feb 1, 2024 at 18:32 UTC
fa6674b5bcf52610e92d19a5105308e56091c386
2 files changed
+51
-17
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+31
-9
@@ -15,7 +15,7 @@
15
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
16
17
let React;
18
-let ReactDOM;
18
+let ReactDOMClient;
19
let ReactDOMServer;
20
let ReactTestUtils;
21
let useState;
@@ -39,7 +39,7 @@ function initModules() {
39
jest.resetModules();
40
41
React = require('react');
42
- ReactDOM = require('react-dom');
42
+ ReactDOMClient = require('react-dom/client');
43
ReactDOMServer = require('react-dom/server');
44
ReactTestUtils = require('react-dom/test-utils');
45
useState = React.useState;
@@ -67,14 +67,19 @@ function initModules() {
67
68
// Make them available to the helpers.
69
return {
70
- ReactDOM,
70
+ ReactDOMClient,
71
ReactDOMServer,
72
ReactTestUtils,
73
};
74
}
75
76
-const {resetModules, itRenders, itThrowsWhenRendering, serverRender} =
77
- ReactDOMServerIntegrationUtils(initModules);
76
+const {
77
+ resetModules,
78
+ itRenders,
79
+ itThrowsWhenRendering,
80
+ clientRenderOnBadMarkup,
81
+ serverRender,
82
+} = ReactDOMServerIntegrationUtils(initModules);
83
84
describe('ReactDOMServerHooks', () => {
85
beforeEach(() => {
@@ -422,8 +427,13 @@ describe('ReactDOMServerHooks', () => {
427
});
428
return 'hi';
429
}
425
-
426
- const domNode = await render(<App />, 1);
430
+ const domNode = await render(
431
+ <App />,
432
+ render === clientRenderOnBadMarkup
433
+ ? // On hydration mismatch we retry and therefore log the warning again.
434
+ 2
435
+ : 1,
436
+ );
437
expect(domNode.textContent).toEqual('hi');
438
});
439
@@ -436,7 +446,13 @@ describe('ReactDOMServerHooks', () => {
446
return value;
447
}
448
439
- const domNode = await render(<App />, 1);
449
+ const domNode = await render(
450
+ <App />,
451
+ render === clientRenderOnBadMarkup
452
+ ? // On hydration mismatch we retry and therefore log the warning again.
453
+ 2
454
+ : 1,
455
+ );
456
expect(domNode.textContent).toEqual('0');
457
});
458
});
@@ -859,7 +875,13 @@ describe('ReactDOMServerHooks', () => {
875
return <Text text={count} />;
876
}
877
862
- const domNode1 = await render(<ReadInMemo />, 1);
878
+ const domNode1 = await render(
879
+ <ReadInMemo />,
880
+ render === clientRenderOnBadMarkup
881
+ ? // On hydration mismatch we retry and therefore log the warning again.
882
+ 2
883
+ : 1,
884
+ );
885
expect(domNode1.textContent).toEqual('42');
886
887
const domNode2 = await render(<ReadInReducer />, 1);
packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+20
-8
@@ -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,19 +21,20 @@ 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
};
34
}
35
36
-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
36
+const {resetModules, itRenders, clientRenderOnBadMarkup} =
37
+ ReactDOMServerIntegrationUtils(initModules);
38
39
describe('ReactDOMServerIntegration', () => {
40
beforeEach(() => {
@@ -365,8 +366,13 @@ describe('ReactDOMServerIntegration', () => {
366
</div>
367
);
368
};
368
- // We expect 1 error.
369
- await render(<App />, 1);
369
+ await render(
370
+ <App />,
371
+ render === clientRenderOnBadMarkup
372
+ ? // On hydration mismatch we retry and therefore log the warning again.
373
+ 2
374
+ : 1,
375
+ );
376
},
377
);
378
@@ -391,8 +397,14 @@ describe('ReactDOMServerIntegration', () => {
397
</div>
398
);
399
};
394
- // We expect 1 error.
395
- await render(<App />, 1);
400
+
401
+ await render(
402
+ <App />,
403
+ render === clientRenderOnBadMarkup
404
+ ? // On hydration mismatch we retry and therefore log the warning again.
405
+ 2
406
+ : 1,
407
+ );
408
},
409
);
410