Add ReactDOMClient to ServerIntegrationReconnecting (#28136)
## Overview Branched off https://github.com/facebook/react/pull/28130 ## Why In https://github.com/facebook/react/pull/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`.
Ricky committed
Feb 1, 2024 at 18:32 UTC
4bd5e3ea5c449fdd2089f6bdfb07fb1120b0eec7
1 file changed
+98
-28
packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js
+98
-28
@@ -13,30 +13,30 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
13
14
let React;
15
let ReactDOM;
16
+let ReactDOMClient;
17
let ReactDOMServer;
18
let ReactTestUtils;
19
19
-function initModules() {
20
- // Reset warning cache.
21
- jest.resetModules();
22
-
23
- React = require('react');
24
- ReactDOM = require('react-dom');
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,
31
- ReactDOMServer,
32
- ReactTestUtils,
33
- };
34
-}
35
-
36
-const {resetModules, expectMarkupMismatch, expectMarkupMatch} =
37
- ReactDOMServerIntegrationUtils(initModules);
38
-
20
describe('ReactDOMServerIntegration', () => {
21
+ function initModules() {
22
+ // Reset warning cache.
23
+ jest.resetModules();
24
+
25
+ React = require('react');
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
+ ReactDOMClient,
33
+ ReactDOMServer,
34
+ ReactTestUtils,
35
+ };
36
+ }
37
+
38
+ const {resetModules, expectMarkupMismatch, expectMarkupMatch} =
39
+ ReactDOMServerIntegrationUtils(initModules);
40
beforeEach(() => {
41
resetModules();
42
});
@@ -123,8 +123,8 @@ describe('ReactDOMServerIntegration', () => {
123
it('should error reconnecting different attribute values', () =>
124
expectMarkupMismatch(<div id="foo" />, <div id="bar" />));
125
126
- it('can explicitly ignore errors reconnecting different element types of children', () =>
127
- expectMarkupMatch(
126
+ it('should error reconnecting different element types of children', () =>
127
+ expectMarkupMismatch(
128
<div>
129
<div />
130
</div>,
@@ -354,8 +354,8 @@ describe('ReactDOMServerIntegration', () => {
354
<div>{''}</div>,
355
));
356
357
- it('can explicitly ignore reconnecting more children', () =>
358
- expectMarkupMatch(
357
+ it('can not ignore reconnecting more children', () =>
358
+ expectMarkupMismatch(
359
<div>
360
<div />
361
</div>,
@@ -365,8 +365,8 @@ describe('ReactDOMServerIntegration', () => {
365
</div>,
366
));
367
368
- it('can explicitly ignore reconnecting fewer children', () =>
369
- expectMarkupMatch(
368
+ it('can not ignore reconnecting fewer children', () =>
369
+ expectMarkupMismatch(
370
<div>
371
<div />
372
<div />
@@ -376,8 +376,8 @@ describe('ReactDOMServerIntegration', () => {
376
</div>,
377
));
378
379
- it('can explicitly ignore reconnecting reordered children', () =>
380
- expectMarkupMatch(
379
+ it('can not ignore reconnecting reordered children', () =>
380
+ expectMarkupMismatch(
381
<div suppressHydrationWarning={true}>
382
<div />
383
<span />
@@ -456,3 +456,73 @@ describe('ReactDOMServerIntegration', () => {
456
));
457
});
458
});
459
+
460
+describe('ReactDOMServerIntegration (legacy)', () => {
461
+ function initModules() {
462
+ // Reset warning cache.
463
+ jest.resetModules();
464
+
465
+ React = require('react');
466
+ ReactDOM = require('react-dom');
467
+ ReactDOMServer = require('react-dom/server');
468
+ ReactTestUtils = require('react-dom/test-utils');
469
+
470
+ // Make them available to the helpers.
471
+ return {
472
+ ReactDOM,
473
+ ReactDOMServer,
474
+ ReactTestUtils,
475
+ };
476
+ }
477
+
478
+ const {resetModules, expectMarkupMatch} =
479
+ ReactDOMServerIntegrationUtils(initModules);
480
+
481
+ beforeEach(() => {
482
+ resetModules();
483
+ });
484
+
485
+ it('legacy mode can explicitly ignore errors reconnecting different element types of children', () =>
486
+ expectMarkupMatch(
487
+ <div>
488
+ <div />
489
+ </div>,
490
+ <div suppressHydrationWarning={true}>
491
+ <span />
492
+ </div>,
493
+ ));
494
+
495
+ it('legacy mode can explicitly ignore reconnecting more children', () =>
496
+ expectMarkupMatch(
497
+ <div>
498
+ <div />
499
+ </div>,
500
+ <div suppressHydrationWarning={true}>
501
+ <div />
502
+ <div />
503
+ </div>,
504
+ ));
505
+
506
+ it('legacy mode can explicitly ignore reconnecting fewer children', () =>
507
+ expectMarkupMatch(
508
+ <div>
509
+ <div />
510
+ <div />
511
+ </div>,
512
+ <div suppressHydrationWarning={true}>
513
+ <div />
514
+ </div>,
515
+ ));
516
+
517
+ it('legacy mode can explicitly ignore reconnecting reordered children', () =>
518
+ expectMarkupMatch(
519
+ <div suppressHydrationWarning={true}>
520
+ <div />
521
+ <span />
522
+ </div>,
523
+ <div suppressHydrationWarning={true}>
524
+ <span />
525
+ <div />
526
+ </div>,
527
+ ));
528
+});