@samitouri / QOS-React-2 / commits / 23f318f23f

chore: use versioned render in store test (#28244)

Ruslan Lesiutin committed Feb 5, 2024 at 17:24 UTC 23f318f23fdfa387aae673e158c618995513aa14
1 file changed +207 -134
packages/react-devtools-shared/src/__tests__/store-test.js
+207 -134
@@ -7,6 +7,8 @@
7 * @flow
8 */
9
10 +import {getVersionedRenderImplementation} from './utils';
11 +
12 describe('Store', () => {
13 let React;
14 let ReactDOM;
@@ -37,13 +39,13 @@ describe('Store', () => {
39 withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
40 });
41
42 + const {render, unmount, createContainer} = getVersionedRenderImplementation();
43 +
44 // @reactVersion >= 18.0
45 it('should not allow a root node to be collapsed', () => {
46 const Component = () => <div>Hi</div>;
47
44 - act(() =>
45 - legacyRender(<Component count={4} />, document.createElement('div')),
46 - );
48 + act(() => render(<Component count={4} />));
49 expect(store).toMatchInlineSnapshot(`
50 [root]
51 <Component>
@@ -62,15 +64,13 @@ describe('Store', () => {
64 it('should properly handle a root with no visible nodes', () => {
65 const Root = ({children}) => children;
66
65 - const container = document.createElement('div');
66 -
67 - act(() => legacyRender(<Root>{null}</Root>, container));
67 + act(() => render(<Root>{null}</Root>));
68 expect(store).toMatchInlineSnapshot(`
69 [root]
70 <Root>
71 `);
72
73 - act(() => legacyRender(<div />, container));
73 + act(() => render(<div />));
74 expect(store).toMatchInlineSnapshot(`[root]`);
75 });
76
@@ -93,17 +93,14 @@ describe('Store', () => {
93 };
94 const Child = () => null;
95
96 - const container = document.createElement('div');
97 -
96 act(() =>
99 - legacyRender(
97 + render(
98 <>
99 <React.Suspense fallback="Loading...">
100 <Owner />
101 </React.Suspense>
102 <Parent />
103 </>,
106 - container,
104 ),
105 );
106 expect(store).toMatchInlineSnapshot(`
@@ -119,9 +116,7 @@ describe('Store', () => {
116 const Component = () => null;
117 Component.displayName = '🟩💜🔵';
118
122 - const container = document.createElement('div');
123 -
124 - act(() => legacyRender(<Component />, container));
119 + act(() => render(<Component />));
120 expect(store).toMatchInlineSnapshot(`
121 [root]
122 <🟩💜🔵>
@@ -196,9 +191,7 @@ describe('Store', () => {
191 new Array(count).fill(true).map((_, index) => <Child key={index} />);
192 const Child = () => <div>Hi!</div>;
193
199 - const container = document.createElement('div');
200 -
201 - act(() => legacyRender(<Grandparent count={4} />, container));
194 + act(() => render(<Grandparent count={4} />));
195 expect(store).toMatchInlineSnapshot(`
196 [root]
197 ▾ <Grandparent>
@@ -214,7 +207,7 @@ describe('Store', () => {
207 <Child key="3">
208 `);
209
217 - act(() => legacyRender(<Grandparent count={2} />, container));
210 + act(() => render(<Grandparent count={2} />));
211 expect(store).toMatchInlineSnapshot(`
212 [root]
213 ▾ <Grandparent>
@@ -226,12 +219,13 @@ describe('Store', () => {
219 <Child key="1">
220 `);
221
229 - act(() => ReactDOM.unmountComponentAtNode(container));
222 + act(() => unmount());
223 expect(store).toMatchInlineSnapshot(``);
224 });
225
226 // @reactVersion >= 18.0
234 - it('should support mount and update operations for multiple roots', () => {
227 + // @reactVersion < 19
228 + it('should support mount and update operations for multiple roots (legacy render)', () => {
229 const Parent = ({count}) =>
230 new Array(count).fill(true).map((_, index) => <Child key={index} />);
231 const Child = () => <div>Hi!</div>;
@@ -285,6 +279,64 @@ describe('Store', () => {
279 expect(store).toMatchInlineSnapshot(``);
280 });
281
282 + // @reactVersion >= 18.0
283 + it('should support mount and update operations for multiple roots (createRoot)', () => {
284 + const Parent = ({count}) =>
285 + new Array(count).fill(true).map((_, index) => <Child key={index} />);
286 + const Child = () => <div>Hi!</div>;
287 +
288 + const containerA = document.createElement('div');
289 + const containerB = document.createElement('div');
290 +
291 + const rootA = ReactDOMClient.createRoot(containerA);
292 + const rootB = ReactDOMClient.createRoot(containerB);
293 +
294 + act(() => {
295 + rootA.render(<Parent key="A" count={3} />);
296 + rootB.render(<Parent key="B" count={2} />);
297 + });
298 + expect(store).toMatchInlineSnapshot(`
299 + [root]
300 + ▾ <Parent key="A">
301 + <Child key="0">
302 + <Child key="1">
303 + <Child key="2">
304 + [root]
305 + ▾ <Parent key="B">
306 + <Child key="0">
307 + <Child key="1">
308 + `);
309 +
310 + act(() => {
311 + rootA.render(<Parent key="A" count={4} />);
312 + rootB.render(<Parent key="B" count={1} />);
313 + });
314 + expect(store).toMatchInlineSnapshot(`
315 + [root]
316 + ▾ <Parent key="A">
317 + <Child key="0">
318 + <Child key="1">
319 + <Child key="2">
320 + <Child key="3">
321 + [root]
322 + ▾ <Parent key="B">
323 + <Child key="0">
324 + `);
325 +
326 + act(() => rootB.unmount());
327 + expect(store).toMatchInlineSnapshot(`
328 + [root]
329 + ▾ <Parent key="A">
330 + <Child key="0">
331 + <Child key="1">
332 + <Child key="2">
333 + <Child key="3">
334 + `);
335 +
336 + act(() => rootA.unmount());
337 + expect(store).toMatchInlineSnapshot(``);
338 + });
339 +
340 // @reactVersion >= 18.0
341 it('should filter DOM nodes from the store tree', () => {
342 const Grandparent = () => (
@@ -302,9 +354,7 @@ describe('Store', () => {
354 );
355 const Child = () => <div>Hi!</div>;
356
305 - act(() =>
306 - legacyRender(<Grandparent count={4} />, document.createElement('div')),
307 - );
357 + act(() => render(<Grandparent count={4} />));
358 expect(store).toMatchInlineSnapshot(`
359 [root]
360 ▾ <Grandparent>
@@ -337,8 +387,7 @@ describe('Store', () => {
387 </React.Fragment>
388 );
389
340 - const container = document.createElement('div');
341 - act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
390 + act(() => render(<Wrapper shouldSuspense={true} />));
391 expect(store).toMatchInlineSnapshot(`
392 [root]
393 ▾ <Wrapper>
@@ -348,7 +397,7 @@ describe('Store', () => {
397 `);
398
399 act(() => {
351 - legacyRender(<Wrapper shouldSuspense={false} />, container);
400 + render(<Wrapper shouldSuspense={false} />);
401 });
402 expect(store).toMatchInlineSnapshot(`
403 [root]
@@ -399,15 +448,13 @@ describe('Store', () => {
448 </React.Fragment>
449 );
450
402 - const container = document.createElement('div');
451 act(() =>
404 - legacyRender(
452 + render(
453 <Wrapper
454 suspendParent={false}
455 suspendFirst={false}
456 suspendSecond={false}
457 />,
410 - container,
458 ),
459 );
460 expect(store).toMatchInlineSnapshot(`
@@ -425,13 +472,12 @@ describe('Store', () => {
472 <Component key="Unrelated at End">
473 `);
474 act(() =>
428 - legacyRender(
475 + render(
476 <Wrapper
477 suspendParent={false}
478 suspendFirst={true}
479 suspendSecond={false}
480 />,
434 - container,
481 ),
482 );
483 expect(store).toMatchInlineSnapshot(`
@@ -449,13 +495,12 @@ describe('Store', () => {
495 <Component key="Unrelated at End">
496 `);
497 act(() =>
452 - legacyRender(
498 + render(
499 <Wrapper
500 suspendParent={false}
501 suspendFirst={false}
502 suspendSecond={true}
503 />,
458 - container,
504 ),
505 );
506 expect(store).toMatchInlineSnapshot(`
@@ -473,13 +518,12 @@ describe('Store', () => {
518 <Component key="Unrelated at End">
519 `);
520 act(() =>
476 - legacyRender(
521 + render(
522 <Wrapper
523 suspendParent={false}
524 suspendFirst={true}
525 suspendSecond={false}
526 />,
482 - container,
527 ),
528 );
529 expect(store).toMatchInlineSnapshot(`
@@ -497,13 +541,12 @@ describe('Store', () => {
541 <Component key="Unrelated at End">
542 `);
543 act(() =>
500 - legacyRender(
544 + render(
545 <Wrapper
546 suspendParent={true}
547 suspendFirst={true}
548 suspendSecond={false}
549 />,
506 - container,
550 ),
551 );
552 expect(store).toMatchInlineSnapshot(`
@@ -514,13 +557,12 @@ describe('Store', () => {
557 <Loading key="Parent Fallback">
558 `);
559 act(() =>
517 - legacyRender(
560 + render(
561 <Wrapper
562 suspendParent={false}
563 suspendFirst={true}
564 suspendSecond={true}
565 />,
523 - container,
566 ),
567 );
568 expect(store).toMatchInlineSnapshot(`
@@ -538,13 +580,12 @@ describe('Store', () => {
580 <Component key="Unrelated at End">
581 `);
582 act(() =>
541 - legacyRender(
583 + render(
584 <Wrapper
585 suspendParent={false}
586 suspendFirst={false}
587 suspendSecond={false}
588 />,
547 - container,
589 ),
590 );
591 expect(store).toMatchInlineSnapshot(`
@@ -599,13 +640,12 @@ describe('Store', () => {
640 <Loading key="Parent Fallback">
641 `);
642 act(() =>
602 - legacyRender(
643 + render(
644 <Wrapper
645 suspendParent={false}
646 suspendFirst={true}
647 suspendSecond={true}
648 />,
608 - container,
649 ),
650 );
651 expect(store).toMatchInlineSnapshot(`
@@ -658,13 +698,12 @@ describe('Store', () => {
698 <Component key="Unrelated at End">
699 `);
700 act(() =>
661 - legacyRender(
701 + render(
702 <Wrapper
703 suspendParent={false}
704 suspendFirst={false}
705 suspendSecond={false}
706 />,
667 - container,
707 ),
708 );
709 expect(store).toMatchInlineSnapshot(`
@@ -743,9 +782,7 @@ describe('Store', () => {
782 new Array(count).fill(true).map((_, index) => <Child key={index} />);
783 const Child = () => <div>Hi!</div>;
784
746 - act(() =>
747 - legacyRender(<Grandparent count={2} />, document.createElement('div')),
748 - );
785 + act(() => render(<Grandparent count={2} />));
786 expect(store).toMatchInlineSnapshot(`
787 [root]
788 ▾ <Grandparent>
@@ -816,9 +853,7 @@ describe('Store', () => {
853 const foo = <Foo key="foo" />;
854 const bar = <Bar key="bar" />;
855
819 - const container = document.createElement('div');
820 -
821 - act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
856 + act(() => render(<Root>{[foo, bar]}</Root>));
857 expect(store).toMatchInlineSnapshot(`
858 [root]
859 ▾ <Root>
@@ -829,7 +864,7 @@ describe('Store', () => {
864 <Component key="1">
865 `);
866
832 - act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
867 + act(() => render(<Root>{[bar, foo]}</Root>));
868 expect(store).toMatchInlineSnapshot(`
869 [root]
870 ▾ <Root>
@@ -870,15 +905,12 @@ describe('Store', () => {
905 new Array(count).fill(true).map((_, index) => <Child key={index} />);
906 const Child = () => <div>Hi!</div>;
907
873 - const container = document.createElement('div');
874 -
908 act(() =>
876 - legacyRender(
909 + render(
910 <React.Fragment>
911 <Parent count={1} />
912 <Parent count={3} />
913 </React.Fragment>,
881 - container,
914 ),
915 );
916 expect(store).toMatchInlineSnapshot(`
@@ -888,12 +920,11 @@ describe('Store', () => {
920 `);
921
922 act(() =>
891 - legacyRender(
923 + render(
924 <React.Fragment>
925 <Parent count={2} />
926 <Parent count={1} />
927 </React.Fragment>,
896 - container,
928 ),
929 );
930 expect(store).toMatchInlineSnapshot(`
@@ -902,12 +933,13 @@ describe('Store', () => {
933 ▸ <Parent>
934 `);
935
905 - act(() => ReactDOM.unmountComponentAtNode(container));
936 + act(() => unmount());
937 expect(store).toMatchInlineSnapshot(``);
938 });
939
940 // @reactVersion >= 18.0
910 - it('should support mount and update operations for multiple roots', () => {
941 + // @reactVersion < 19
942 + it('should support mount and update operations for multiple roots (legacy render)', () => {
943 const Parent = ({count}) =>
944 new Array(count).fill(true).map((_, index) => <Child key={index} />);
945 const Child = () => <div>Hi!</div>;
@@ -947,6 +979,50 @@ describe('Store', () => {
979 expect(store).toMatchInlineSnapshot(``);
980 });
981
982 + // @reactVersion >= 18.0
983 + it('should support mount and update operations for multiple roots (createRoot)', () => {
984 + const Parent = ({count}) =>
985 + new Array(count).fill(true).map((_, index) => <Child key={index} />);
986 + const Child = () => <div>Hi!</div>;
987 +
988 + const containerA = document.createElement('div');
989 + const containerB = document.createElement('div');
990 +
991 + const rootA = ReactDOMClient.createRoot(containerA);
992 + const rootB = ReactDOMClient.createRoot(containerB);
993 +
994 + act(() => {
995 + rootA.render(<Parent key="A" count={3} />);
996 + rootB.render(<Parent key="B" count={2} />);
997 + });
998 + expect(store).toMatchInlineSnapshot(`
999 + [root]
1000 + ▸ <Parent key="A">
1001 + [root]
1002 + ▸ <Parent key="B">
1003 + `);
1004 +
1005 + act(() => {
1006 + rootA.render(<Parent key="A" count={4} />);
1007 + rootB.render(<Parent key="B" count={1} />);
1008 + });
1009 + expect(store).toMatchInlineSnapshot(`
1010 + [root]
1011 + ▸ <Parent key="A">
1012 + [root]
1013 + ▸ <Parent key="B">
1014 + `);
1015 +
1016 + act(() => rootB.unmount());
1017 + expect(store).toMatchInlineSnapshot(`
1018 + [root]
1019 + ▸ <Parent key="A">
1020 + `);
1021 +
1022 + act(() => rootA.unmount());
1023 + expect(store).toMatchInlineSnapshot(``);
1024 + });
1025 +
1026 // @reactVersion >= 18.0
1027 it('should filter DOM nodes from the store tree', () => {
1028 const Grandparent = () => (
@@ -964,9 +1040,7 @@ describe('Store', () => {
1040 );
1041 const Child = () => <div>Hi!</div>;
1042
967 - act(() =>
968 - legacyRender(<Grandparent count={4} />, document.createElement('div')),
969 - );
1043 + act(() => render(<Grandparent count={4} />));
1044 expect(store).toMatchInlineSnapshot(`
1045 [root]
1046 ▸ <Grandparent>
@@ -1012,8 +1086,7 @@ describe('Store', () => {
1086 </React.Fragment>
1087 );
1088
1015 - const container = document.createElement('div');
1016 - act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
1089 + act(() => render(<Wrapper shouldSuspense={true} />));
1090 expect(store).toMatchInlineSnapshot(`
1091 [root]
1092 ▸ <Wrapper>
@@ -1031,7 +1104,7 @@ describe('Store', () => {
1104 `);
1105
1106 act(() => {
1034 - legacyRender(<Wrapper shouldSuspense={false} />, container);
1107 + render(<Wrapper shouldSuspense={false} />);
1108 });
1109 expect(store).toMatchInlineSnapshot(`
1110 [root]
@@ -1054,9 +1127,7 @@ describe('Store', () => {
1127 new Array(count).fill(true).map((_, index) => <Child key={index} />);
1128 const Child = () => <div>Hi!</div>;
1129
1057 - act(() =>
1058 - legacyRender(<Grandparent count={2} />, document.createElement('div')),
1059 - );
1130 + act(() => render(<Grandparent count={2} />));
1131 expect(store).toMatchInlineSnapshot(`
1132 [root]
1133 ▸ <Grandparent>
@@ -1136,12 +1207,7 @@ describe('Store', () => {
1207
1208 const ref = React.createRef();
1209
1139 - act(() =>
1140 - legacyRender(
1141 - <Wrapper forwardedRef={ref} />,
1142 - document.createElement('div'),
1143 - ),
1144 - );
1210 + act(() => render(<Wrapper forwardedRef={ref} />));
1211 expect(store).toMatchInlineSnapshot(`
1212 [root]
1213 ▸ <Wrapper>
@@ -1207,15 +1273,13 @@ describe('Store', () => {
1273 const foo = <Foo key="foo" />;
1274 const bar = <Bar key="bar" />;
1275
1210 - const container = document.createElement('div');
1211 -
1212 - act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
1276 + act(() => render(<Root>{[foo, bar]}</Root>));
1277 expect(store).toMatchInlineSnapshot(`
1278 [root]
1279 ▸ <Root>
1280 `);
1281
1218 - act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
1282 + act(() => render(<Root>{[bar, foo]}</Root>));
1283 expect(store).toMatchInlineSnapshot(`
1284 [root]
1285 ▸ <Root>
@@ -1264,7 +1328,7 @@ describe('Store', () => {
1328 const Parent = () => <Child />;
1329 const Child = () => null;
1330
1267 - act(() => legacyRender(<SuspenseTree />, document.createElement('div')));
1331 + act(() => render(<SuspenseTree />));
1332 expect(store).toMatchInlineSnapshot(`
1333 [root]
1334 ▸ <SuspenseTree>
@@ -1328,7 +1392,7 @@ describe('Store', () => {
1392 const Parent = () => <Child />;
1393 const Child = () => null;
1394
1331 - act(() => legacyRender(<Grandparent />, document.createElement('div')));
1395 + act(() => render(<Grandparent />));
1396
1397 for (let i = 0; i < store.numElements; i++) {
1398 expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
@@ -1342,8 +1406,8 @@ describe('Store', () => {
1406 const Child = () => null;
1407
1408 act(() => {
1345 - legacyRender(<Grandparent />, document.createElement('div'));
1346 - legacyRender(<Grandparent />, document.createElement('div'));
1409 + render(<Grandparent />);
1410 + render(<Grandparent />);
1411 });
1412
1413 for (let i = 0; i < store.numElements; i++) {
@@ -1358,12 +1422,11 @@ describe('Store', () => {
1422 const Child = () => null;
1423
1424 act(() =>
1361 - legacyRender(
1425 + render(
1426 <React.Fragment>
1427 <Grandparent />
1428 <Grandparent />
1429 </React.Fragment>,
1366 - document.createElement('div'),
1430 ),
1431 );
1432
@@ -1379,19 +1442,20 @@ describe('Store', () => {
1442 const Child = () => null;
1443
1444 act(() => {
1382 - legacyRender(
1445 + render(
1446 <React.Fragment>
1447 <Grandparent />
1448 <Grandparent />
1449 </React.Fragment>,
1387 - document.createElement('div'),
1450 );
1389 - legacyRender(
1451 +
1452 + createContainer();
1453 +
1454 + render(
1455 <React.Fragment>
1456 <Grandparent />
1457 <Grandparent />
1458 </React.Fragment>,
1394 - document.createElement('div'),
1459 );
1460 });
1461
@@ -1402,7 +1466,8 @@ describe('Store', () => {
1466 });
1467
1468 // @reactVersion >= 18.0
1405 - it('detects and updates profiling support based on the attached roots', () => {
1469 + // @reactVersion < 19
1470 + it('detects and updates profiling support based on the attached roots (legacy render)', () => {
1471 const Component = () => null;
1472
1473 const containerA = document.createElement('div');
@@ -1421,6 +1486,29 @@ describe('Store', () => {
1486 expect(store.rootSupportsBasicProfiling).toBe(false);
1487 });
1488
1489 + // @reactVersion >= 18
1490 + it('detects and updates profiling support based on the attached roots (createRoot)', () => {
1491 + const Component = () => null;
1492 +
1493 + const containerA = document.createElement('div');
1494 + const containerB = document.createElement('div');
1495 +
1496 + const rootA = ReactDOMClient.createRoot(containerA);
1497 + const rootB = ReactDOMClient.createRoot(containerB);
1498 +
1499 + expect(store.rootSupportsBasicProfiling).toBe(false);
1500 +
1501 + act(() => rootA.render(<Component />));
1502 + expect(store.rootSupportsBasicProfiling).toBe(true);
1503 +
1504 + act(() => rootB.render(<Component />));
1505 + act(() => rootA.unmount());
1506 + expect(store.rootSupportsBasicProfiling).toBe(true);
1507 +
1508 + act(() => rootB.unmount());
1509 + expect(store.rootSupportsBasicProfiling).toBe(false);
1510 + });
1511 +
1512 // @reactVersion >= 18.0
1513 it('should properly serialize non-string key values', () => {
1514 const Child = () => null;
@@ -1429,7 +1517,7 @@ describe('Store', () => {
1517 // This is pretty hacky.
1518 const fauxElement = Object.assign({}, <Child />, {key: 123});
1519
1432 - act(() => legacyRender([fauxElement], document.createElement('div')));
1520 + act(() => render([fauxElement]));
1521 expect(store).toMatchInlineSnapshot(`
1522 [root]
1523 <Child key="123">
@@ -1488,15 +1576,13 @@ describe('Store', () => {
1576 </React.Fragment>
1577 );
1578
1491 - const container = document.createElement('div');
1492 -
1579 // Render once to start fetching the lazy component
1494 - act(() => legacyRender(<App />, container));
1580 + act(() => render(<App />));
1581
1582 await Promise.resolve();
1583
1584 // Render again after it resolves
1499 - act(() => legacyRender(<App />, container));
1585 + act(() => render(<App />));
1586
1587 expect(store).toMatchInlineSnapshot(`
1588 [root]
@@ -1543,6 +1629,7 @@ describe('Store', () => {
1629 });
1630
1631 // @reactVersion >= 18.0
1632 + // @reactVersion < 19
1633 it('should support Lazy components (legacy render)', async () => {
1634 const container = document.createElement('div');
1635
@@ -1612,6 +1699,7 @@ describe('Store', () => {
1699 });
1700
1701 // @reactVersion >= 18.0
1702 + // @reactVersion < 19
1703 it('should support Lazy components that are unmounted before they finish loading (legacy render)', async () => {
1704 const container = document.createElement('div');
1705
@@ -1634,6 +1722,7 @@ describe('Store', () => {
1722 });
1723
1724 // @reactVersion >= 18.0
1725 + // @reactVersion < 19
1726 it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
1727 const container = document.createElement('div');
1728 const root = ReactDOMClient.createRoot(container);
@@ -1665,10 +1754,9 @@ describe('Store', () => {
1754 console.warn('test-only: render warning');
1755 return null;
1756 }
1668 - const container = document.createElement('div');
1757
1758 withErrorsOrWarningsIgnored(['test-only:'], () => {
1671 - act(() => legacyRender(<Example />, container));
1759 + act(() => render(<Example />));
1760 });
1761
1762 expect(store).toMatchInlineSnapshot(`
@@ -1678,7 +1766,7 @@ describe('Store', () => {
1766 `);
1767
1768 withErrorsOrWarningsIgnored(['test-only:'], () => {
1681 - act(() => legacyRender(<Example rerender={1} />, container));
1769 + act(() => render(<Example rerender={1} />));
1770 });
1771
1772 expect(store).toMatchInlineSnapshot(`
@@ -1697,10 +1785,9 @@ describe('Store', () => {
1785 });
1786 return null;
1787 }
1700 - const container = document.createElement('div');
1788
1789 withErrorsOrWarningsIgnored(['test-only:'], () => {
1703 - act(() => legacyRender(<Example />, container));
1790 + act(() => render(<Example />));
1791 });
1792
1793 expect(store).toMatchInlineSnapshot(`
@@ -1710,7 +1797,7 @@ describe('Store', () => {
1797 `);
1798
1799 withErrorsOrWarningsIgnored(['test-only:'], () => {
1713 - act(() => legacyRender(<Example rerender={1} />, container));
1800 + act(() => render(<Example rerender={1} />));
1801 });
1802
1803 expect(store).toMatchInlineSnapshot(`
@@ -1739,11 +1826,10 @@ describe('Store', () => {
1826 });
1827 return null;
1828 }
1742 - const container = document.createElement('div');
1829
1830 withErrorsOrWarningsIgnored(['test-only:'], () => {
1831 act(() => {
1746 - legacyRender(<Example />, container);
1832 + render(<Example />);
1833 }, false);
1834 });
1835 flushPendingBridgeOperations();
@@ -1760,7 +1846,7 @@ describe('Store', () => {
1846 <Example> ✕⚠
1847 `);
1848
1763 - act(() => ReactDOM.unmountComponentAtNode(container));
1849 + act(() => unmount());
1850 expect(store).toMatchInlineSnapshot(``);
1851 });
1852
@@ -1778,15 +1864,12 @@ describe('Store', () => {
1864 return null;
1865 }
1866
1781 - const container = document.createElement('div');
1782 -
1867 withErrorsOrWarningsIgnored(['test-only:'], () => {
1868 act(() => {
1785 - legacyRender(
1869 + render(
1870 <>
1871 <Example />
1872 </>,
1789 - container,
1873 );
1874 }, false);
1875 flushPendingBridgeOperations();
@@ -1797,12 +1880,11 @@ describe('Store', () => {
1880
1881 // Before warnings and errors have flushed, flush another commit.
1882 act(() => {
1800 - legacyRender(
1883 + render(
1884 <>
1885 <Example />
1886 <Noop />
1887 </>,
1805 - container,
1888 );
1889 }, false);
1890 flushPendingBridgeOperations();
@@ -1823,14 +1905,13 @@ describe('Store', () => {
1905 <Noop>
1906 `);
1907
1826 - act(() => ReactDOM.unmountComponentAtNode(container));
1908 + act(() => unmount());
1909 expect(store).toMatchInlineSnapshot(``);
1910 });
1911 });
1912
1913 // @reactVersion >= 18.0
1914 it('from react get counted', () => {
1833 - const container = document.createElement('div');
1915 function Example() {
1916 return [<Child />];
1917 }
@@ -1841,7 +1922,7 @@ describe('Store', () => {
1922 withErrorsOrWarningsIgnored(
1923 ['Warning: Each child in a list should have a unique "key" prop'],
1924 () => {
1844 - act(() => legacyRender(<Example />, container));
1925 + act(() => render(<Example />));
1926 },
1927 );
1928
@@ -1860,15 +1941,14 @@ describe('Store', () => {
1941 console.warn('test-only: render warning');
1942 return null;
1943 }
1863 - const container = document.createElement('div');
1944 +
1945 withErrorsOrWarningsIgnored(['test-only:'], () => {
1946 act(() =>
1866 - legacyRender(
1947 + render(
1948 <React.Fragment>
1949 <Example />
1950 <Example />
1951 </React.Fragment>,
1871 - container,
1952 ),
1953 );
1954 });
@@ -1902,15 +1982,14 @@ describe('Store', () => {
1982 console.warn('test-only: render warning');
1983 return null;
1984 }
1905 - const container = document.createElement('div');
1985 +
1986 withErrorsOrWarningsIgnored(['test-only:'], () => {
1987 act(() =>
1908 - legacyRender(
1988 + render(
1989 <React.Fragment>
1990 <Example />
1991 <Example />
1992 </React.Fragment>,
1913 - container,
1993 ),
1994 );
1995 });
@@ -1948,15 +2027,14 @@ describe('Store', () => {
2027 console.warn('test-only: render warning');
2028 return null;
2029 }
1951 - const container = document.createElement('div');
2030 +
2031 withErrorsOrWarningsIgnored(['test-only:'], () => {
2032 act(() =>
1954 - legacyRender(
2033 + render(
2034 <React.Fragment>
2035 <Example />
2036 <Example />
2037 </React.Fragment>,
1959 - container,
2038 ),
2039 );
2040 });
@@ -2002,16 +2080,15 @@ describe('Store', () => {
2080 console.warn('test-only: render warning');
2081 return null;
2082 }
2005 - const container = document.createElement('div');
2083 +
2084 withErrorsOrWarningsIgnored(['test-only:'], () => {
2085 act(() =>
2008 - legacyRender(
2086 + render(
2087 <React.Fragment>
2088 <ComponentWithError />
2089 <ComponentWithWarning />
2090 <ComponentWithWarningAndError />
2091 </React.Fragment>,
2014 - container,
2092 ),
2093 );
2094 });
@@ -2025,12 +2102,11 @@ describe('Store', () => {
2102
2103 withErrorsOrWarningsIgnored(['test-only:'], () => {
2104 act(() =>
2028 - legacyRender(
2105 + render(
2106 <React.Fragment>
2107 <ComponentWithWarning />
2108 <ComponentWithWarningAndError />
2109 </React.Fragment>,
2033 - container,
2110 ),
2111 );
2112 });
@@ -2043,11 +2119,10 @@ describe('Store', () => {
2119
2120 withErrorsOrWarningsIgnored(['test-only:'], () => {
2121 act(() =>
2046 - legacyRender(
2122 + render(
2123 <React.Fragment>
2124 <ComponentWithWarning />
2125 </React.Fragment>,
2050 - container,
2126 ),
2127 );
2128 });
@@ -2058,7 +2133,7 @@ describe('Store', () => {
2133 `);
2134
2135 withErrorsOrWarningsIgnored(['test-only:'], () => {
2061 - act(() => legacyRender(<React.Fragment />, container));
2136 + act(() => render(<React.Fragment />));
2137 });
2138 expect(store).toMatchInlineSnapshot(`[root]`);
2139 expect(store.errorCount).toBe(0);
@@ -2086,9 +2161,7 @@ describe('Store', () => {
2161 );
2162 }
2163
2089 - const container = document.createElement('div');
2090 - const root = ReactDOMClient.createRoot(container);
2091 - await actAsync(() => root.render(<App renderA={true} />));
2164 + await actAsync(() => render(<App renderA={true} />));
2165
2166 expect(store).toMatchInlineSnapshot(`
2167 [root]
@@ -2097,7 +2170,7 @@ describe('Store', () => {
2170 <ChildA>
2171 `);
2172
2100 - await actAsync(() => root.render(<App renderA={false} />));
2173 + await actAsync(() => render(<App renderA={false} />));
2174
2175 expect(store).toMatchInlineSnapshot(`
2176 [root]