@samitouri / QOS-React-1 / commits / 08d6cef46a

chore: use versioned render in storeStressSync test and gate them for legacy rendering (#28216)

Ruslan Lesiutin committed Feb 6, 2024 at 16:51 UTC 08d6cef46ab7310b6e8f4330e2fd23586a026a9c
1 file changed +119 -132
packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+119 -132
@@ -7,14 +7,14 @@
7 * @flow
8 */
9
10 +import {getLegacyRenderImplementation} from './utils';
11 +
12 describe('StoreStress (Legacy Mode)', () => {
13 let React;
12 - let ReactDOM;
14 let act;
15 let bridge;
16 let store;
17 let print;
17 - let legacyRender;
18
19 beforeEach(() => {
20 bridge = global.bridge;
@@ -22,18 +22,20 @@ describe('StoreStress (Legacy Mode)', () => {
22 store.collapseNodesByDefault = false;
23
24 React = require('react');
25 - ReactDOM = require('react-dom');
25
26 const utils = require('./utils');
27 act = utils.act;
29 - legacyRender = utils.legacyRender;
28
29 print = require('./__serializers__/storeSerializer').print;
30 });
31
32 + const {render, unmount, createContainer, getContainer} =
33 + getLegacyRenderImplementation();
34 +
35 // This is a stress test for the tree mount/update/unmount traversal.
36 // It renders different trees that should produce the same output.
37 // @reactVersion >= 16.9
38 + // @reactVersion < 19
39 it('should handle a stress test with different tree operations (Legacy Mode)', () => {
40 let setShowX;
41 const A = () => 'a';
@@ -60,8 +62,7 @@ describe('StoreStress (Legacy Mode)', () => {
62 }
63
64 // 1. Render a normal version of [a, b, c, d, e].
63 - let container = document.createElement('div');
64 - act(() => legacyRender(<Parent>{[a, b, c, d, e]}</Parent>, container));
65 + act(() => render(<Parent>{[a, b, c, d, e]}</Parent>));
66 expect(store).toMatchInlineSnapshot(`
67 [root]
68 ▾ <Parent>
@@ -71,7 +72,7 @@ describe('StoreStress (Legacy Mode)', () => {
72 <D key="d">
73 <E key="e">
74 `);
74 - expect(container.textContent).toMatch('abcde');
75 + expect(getContainer().textContent).toMatch('abcde');
76 const snapshotForABCDE = print(store);
77
78 // 2. Render a version where <C /> renders an <X /> child instead of 'c'.
@@ -89,18 +90,18 @@ describe('StoreStress (Legacy Mode)', () => {
90 <D key="d">
91 <E key="e">
92 `);
92 - expect(container.textContent).toMatch('abxde');
93 + expect(getContainer().textContent).toMatch('abxde');
94 const snapshotForABXDE = print(store);
95
96 // 3. Verify flipping it back produces the original result.
97 act(() => {
98 setShowX(false);
99 });
99 - expect(container.textContent).toMatch('abcde');
100 + expect(getContainer().textContent).toMatch('abcde');
101 expect(print(store)).toBe(snapshotForABCDE);
102
103 // 4. Clean up.
103 - act(() => ReactDOM.unmountComponentAtNode(container));
104 + act(() => unmount());
105 expect(print(store)).toBe('');
106
107 // Now comes the interesting part.
@@ -138,61 +139,62 @@ describe('StoreStress (Legacy Mode)', () => {
139 // 5. Test fresh mount for each case.
140 for (let i = 0; i < cases.length; i++) {
141 // Ensure fresh mount.
141 - container = document.createElement('div');
142 + createContainer();
143
144 // Verify mounting 'abcde'.
144 - act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
145 - expect(container.textContent).toMatch('abcde');
145 + act(() => render(<Parent>{cases[i]}</Parent>));
146 + expect(getContainer().textContent).toMatch('abcde');
147 expect(print(store)).toEqual(snapshotForABCDE);
148
149 // Verify switching to 'abxde'.
150 act(() => {
151 setShowX(true);
152 });
152 - expect(container.textContent).toMatch('abxde');
153 + expect(getContainer().textContent).toMatch('abxde');
154 expect(print(store)).toBe(snapshotForABXDE);
155
156 // Verify switching back to 'abcde'.
157 act(() => {
158 setShowX(false);
159 });
159 - expect(container.textContent).toMatch('abcde');
160 + expect(getContainer().textContent).toMatch('abcde');
161 expect(print(store)).toBe(snapshotForABCDE);
162
163 // Clean up.
163 - act(() => ReactDOM.unmountComponentAtNode(container));
164 + act(() => unmount());
165 expect(print(store)).toBe('');
166 }
167
168 // 6. Verify *updates* by reusing the container between iterations.
169 // There'll be no unmounting until the very end.
169 - container = document.createElement('div');
170 + createContainer();
171 for (let i = 0; i < cases.length; i++) {
172 // Verify mounting 'abcde'.
172 - act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
173 - expect(container.textContent).toMatch('abcde');
173 + act(() => render(<Parent>{cases[i]}</Parent>));
174 + expect(getContainer().textContent).toMatch('abcde');
175 expect(print(store)).toEqual(snapshotForABCDE);
176
177 // Verify switching to 'abxde'.
178 act(() => {
179 setShowX(true);
180 });
180 - expect(container.textContent).toMatch('abxde');
181 + expect(getContainer().textContent).toMatch('abxde');
182 expect(print(store)).toBe(snapshotForABXDE);
183
184 // Verify switching back to 'abcde'.
185 act(() => {
186 setShowX(false);
187 });
187 - expect(container.textContent).toMatch('abcde');
188 + expect(getContainer().textContent).toMatch('abcde');
189 expect(print(store)).toBe(snapshotForABCDE);
190 // Don't unmount. Reuse the container between iterations.
191 }
191 - act(() => ReactDOM.unmountComponentAtNode(container));
192 + act(() => unmount());
193 expect(print(store)).toBe('');
194 });
195
196 // @reactVersion >= 16.9
197 + // @reactVersion <= 18.2
198 it('should handle stress test with reordering (Legacy Mode)', () => {
199 const A = () => 'a';
200 const B = () => 'b';
@@ -320,27 +322,29 @@ describe('StoreStress (Legacy Mode)', () => {
322
323 // 1. Capture the expected render result.
324 const snapshots = [];
323 - let container = document.createElement('div');
325 for (let i = 0; i < steps.length; i++) {
325 - act(() => legacyRender(<Root>{steps[i]}</Root>, container));
326 + createContainer();
327 +
328 + act(() => render(<Root>{steps[i]}</Root>));
329 // We snapshot each step once so it doesn't regress.
330 expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
331 snapshots.push(print(store));
329 - act(() => ReactDOM.unmountComponentAtNode(container));
332 + act(() => unmount());
333 expect(print(store)).toBe('');
334 }
335
336 // 2. Verify that we can update from every step to every other step and back.
337 for (let i = 0; i < steps.length; i++) {
338 for (let j = 0; j < steps.length; j++) {
336 - container = document.createElement('div');
337 - act(() => legacyRender(<Root>{steps[i]}</Root>, container));
339 + createContainer();
340 +
341 + act(() => render(<Root>{steps[i]}</Root>));
342 expect(print(store)).toMatch(snapshots[i]);
339 - act(() => legacyRender(<Root>{steps[j]}</Root>, container));
343 + act(() => render(<Root>{steps[j]}</Root>));
344 expect(print(store)).toMatch(snapshots[j]);
341 - act(() => legacyRender(<Root>{steps[i]}</Root>, container));
345 + act(() => render(<Root>{steps[i]}</Root>));
346 expect(print(store)).toMatch(snapshots[i]);
343 - act(() => ReactDOM.unmountComponentAtNode(container));
347 + act(() => unmount());
348 expect(print(store)).toBe('');
349 }
350 }
@@ -348,41 +352,40 @@ describe('StoreStress (Legacy Mode)', () => {
352 // 3. Same test as above, but this time we wrap children in a host component.
353 for (let i = 0; i < steps.length; i++) {
354 for (let j = 0; j < steps.length; j++) {
351 - container = document.createElement('div');
355 + createContainer();
356 +
357 act(() =>
353 - legacyRender(
358 + render(
359 <Root>
360 <div>{steps[i]}</div>
361 </Root>,
357 - container,
362 ),
363 );
364 expect(print(store)).toMatch(snapshots[i]);
365 act(() =>
362 - legacyRender(
366 + render(
367 <Root>
368 <div>{steps[j]}</div>
369 </Root>,
366 - container,
370 ),
371 );
372 expect(print(store)).toMatch(snapshots[j]);
373 act(() =>
371 - legacyRender(
374 + render(
375 <Root>
376 <div>{steps[i]}</div>
377 </Root>,
375 - container,
378 ),
379 );
380 expect(print(store)).toMatch(snapshots[i]);
379 - act(() => ReactDOM.unmountComponentAtNode(container));
381 + act(() => unmount());
382 expect(print(store)).toBe('');
383 }
384 }
385 });
386
387 // @reactVersion >= 18.0
388 + // @reactVersion <= 18.2
389 it('should handle a stress test for Suspense (Legacy Mode)', async () => {
390 const A = () => 'a';
391 const B = () => 'b';
@@ -528,29 +531,31 @@ describe('StoreStress (Legacy Mode)', () => {
531 // 1. For each step, check Suspense can render them as initial primary content.
532 // This is the only step where we use Jest snapshots.
533 const snapshots = [];
531 - let container = document.createElement('div');
534 for (let i = 0; i < steps.length; i++) {
535 + createContainer();
536 +
537 act(() =>
534 - legacyRender(
538 + render(
539 <Root>
540 <X />
541 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
542 <Y />
543 </Root>,
540 - container,
544 ),
545 );
546 // We snapshot each step once so it doesn't regress.
547 expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
548 snapshots.push(print(store));
546 - act(() => ReactDOM.unmountComponentAtNode(container));
549 + act(() => unmount());
550 expect(print(store)).toBe('');
551 }
552
553 // 2. Verify check Suspense can render same steps as initial fallback content.
554 for (let i = 0; i < steps.length; i++) {
555 + createContainer();
556 +
557 act(() =>
553 - legacyRender(
558 + render(
559 <Root>
560 <X />
561 <React.Suspense fallback={steps[i]}>
@@ -560,11 +565,10 @@ describe('StoreStress (Legacy Mode)', () => {
565 </React.Suspense>
566 <Y />
567 </Root>,
563 - container,
568 ),
569 );
570 expect(print(store)).toEqual(snapshots[i]);
567 - act(() => ReactDOM.unmountComponentAtNode(container));
571 + act(() => unmount());
572 expect(print(store)).toBe('');
573 }
574
@@ -572,45 +576,43 @@ describe('StoreStress (Legacy Mode)', () => {
576 for (let i = 0; i < steps.length; i++) {
577 for (let j = 0; j < steps.length; j++) {
578 // Always start with a fresh container and steps[i].
575 - container = document.createElement('div');
579 + createContainer();
580 +
581 act(() =>
577 - legacyRender(
582 + render(
583 <Root>
584 <X />
585 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
586 <Y />
587 </Root>,
583 - container,
588 ),
589 );
590 expect(print(store)).toEqual(snapshots[i]);
591 // Re-render with steps[j].
592 act(() =>
589 - legacyRender(
593 + render(
594 <Root>
595 <X />
596 <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
597 <Y />
598 </Root>,
595 - container,
599 ),
600 );
601 // Verify the successful transition to steps[j].
602 expect(print(store)).toEqual(snapshots[j]);
603 // Check that we can transition back again.
604 act(() =>
602 - legacyRender(
605 + render(
606 <Root>
607 <X />
608 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
609 <Y />
610 </Root>,
608 - container,
611 ),
612 );
613 expect(print(store)).toEqual(snapshots[i]);
614 // Clean up after every iteration.
613 - act(() => ReactDOM.unmountComponentAtNode(container));
615 + act(() => unmount());
616 expect(print(store)).toBe('');
617 }
618 }
@@ -619,9 +621,10 @@ describe('StoreStress (Legacy Mode)', () => {
621 for (let i = 0; i < steps.length; i++) {
622 for (let j = 0; j < steps.length; j++) {
623 // Always start with a fresh container and steps[i].
622 - container = document.createElement('div');
624 + createContainer();
625 +
626 act(() =>
624 - legacyRender(
627 + render(
628 <Root>
629 <X />
630 <React.Suspense fallback={steps[i]}>
@@ -631,13 +634,12 @@ describe('StoreStress (Legacy Mode)', () => {
634 </React.Suspense>
635 <Y />
636 </Root>,
634 - container,
637 ),
638 );
639 expect(print(store)).toEqual(snapshots[i]);
640 // Re-render with steps[j].
641 act(() =>
640 - legacyRender(
642 + render(
643 <Root>
644 <X />
645 <React.Suspense fallback={steps[j]}>
@@ -647,14 +649,13 @@ describe('StoreStress (Legacy Mode)', () => {
649 </React.Suspense>
650 <Y />
651 </Root>,
650 - container,
652 ),
653 );
654 // Verify the successful transition to steps[j].
655 expect(print(store)).toEqual(snapshots[j]);
656 // Check that we can transition back again.
657 act(() =>
657 - legacyRender(
658 + render(
659 <Root>
660 <X />
661 <React.Suspense fallback={steps[i]}>
@@ -664,12 +665,11 @@ describe('StoreStress (Legacy Mode)', () => {
665 </React.Suspense>
666 <Y />
667 </Root>,
667 - container,
668 ),
669 );
670 expect(print(store)).toEqual(snapshots[i]);
671 // Clean up after every iteration.
672 - act(() => ReactDOM.unmountComponentAtNode(container));
672 + act(() => unmount());
673 expect(print(store)).toBe('');
674 }
675 }
@@ -678,21 +678,21 @@ describe('StoreStress (Legacy Mode)', () => {
678 for (let i = 0; i < steps.length; i++) {
679 for (let j = 0; j < steps.length; j++) {
680 // Always start with a fresh container and steps[i].
681 - container = document.createElement('div');
681 + createContainer();
682 +
683 act(() =>
683 - legacyRender(
684 + render(
685 <Root>
686 <X />
687 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
688 <Y />
689 </Root>,
689 - container,
690 ),
691 );
692 expect(print(store)).toEqual(snapshots[i]);
693 // Re-render with steps[j].
694 act(() =>
695 - legacyRender(
695 + render(
696 <Root>
697 <X />
698 <React.Suspense fallback={steps[j]}>
@@ -702,25 +702,23 @@ describe('StoreStress (Legacy Mode)', () => {
702 </React.Suspense>
703 <Y />
704 </Root>,
705 - container,
705 ),
706 );
707 // Verify the successful transition to steps[j].
708 expect(print(store)).toEqual(snapshots[j]);
709 // Check that we can transition back again.
710 act(() =>
712 - legacyRender(
711 + render(
712 <Root>
713 <X />
714 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
715 <Y />
716 </Root>,
718 - container,
717 ),
718 );
719 expect(print(store)).toEqual(snapshots[i]);
720 // Clean up after every iteration.
723 - act(() => ReactDOM.unmountComponentAtNode(container));
721 + act(() => unmount());
722 expect(print(store)).toBe('');
723 }
724 }
@@ -729,9 +727,10 @@ describe('StoreStress (Legacy Mode)', () => {
727 for (let i = 0; i < steps.length; i++) {
728 for (let j = 0; j < steps.length; j++) {
729 // Always start with a fresh container and steps[i].
732 - container = document.createElement('div');
730 + createContainer();
731 +
732 act(() =>
734 - legacyRender(
733 + render(
734 <Root>
735 <X />
736 <React.Suspense fallback={steps[i]}>
@@ -741,26 +740,24 @@ describe('StoreStress (Legacy Mode)', () => {
740 </React.Suspense>
741 <Y />
742 </Root>,
744 - container,
743 ),
744 );
745 expect(print(store)).toEqual(snapshots[i]);
746 // Re-render with steps[j].
747 act(() =>
750 - legacyRender(
748 + render(
749 <Root>
750 <X />
751 <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
752 <Y />
753 </Root>,
756 - container,
754 ),
755 );
756 // Verify the successful transition to steps[j].
757 expect(print(store)).toEqual(snapshots[j]);
758 // Check that we can transition back again.
759 act(() =>
763 - legacyRender(
760 + render(
761 <Root>
762 <X />
763 <React.Suspense fallback={steps[i]}>
@@ -770,12 +767,11 @@ describe('StoreStress (Legacy Mode)', () => {
767 </React.Suspense>
768 <Y />
769 </Root>,
773 - container,
770 ),
771 );
772 expect(print(store)).toEqual(snapshots[i]);
773 // Clean up after every iteration.
778 - act(() => ReactDOM.unmountComponentAtNode(container));
774 + act(() => unmount());
775 expect(print(store)).toBe('');
776 }
777 }
@@ -784,15 +780,15 @@ describe('StoreStress (Legacy Mode)', () => {
780 for (let i = 0; i < steps.length; i++) {
781 for (let j = 0; j < steps.length; j++) {
782 // Always start with a fresh container and steps[i].
787 - container = document.createElement('div');
783 + createContainer();
784 +
785 act(() =>
789 - legacyRender(
786 + render(
787 <Root>
788 <X />
789 <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
790 <Y />
791 </Root>,
795 - container,
792 ),
793 );
794
@@ -824,7 +820,7 @@ describe('StoreStress (Legacy Mode)', () => {
820
821 // Trigger actual fallback.
822 act(() =>
827 - legacyRender(
823 + render(
824 <Root>
825 <X />
826 <React.Suspense fallback={steps[j]}>
@@ -834,7 +830,6 @@ describe('StoreStress (Legacy Mode)', () => {
830 </React.Suspense>
831 <Y />
832 </Root>,
837 - container,
833 ),
834 );
835 expect(print(store)).toEqual(snapshots[j]);
@@ -852,13 +847,12 @@ describe('StoreStress (Legacy Mode)', () => {
847
848 // Switch to primary mode.
849 act(() =>
855 - legacyRender(
850 + render(
851 <Root>
852 <X />
853 <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
854 <Y />
855 </Root>,
861 - container,
856 ),
857 );
858 // Fallback is still forced though.
@@ -876,13 +870,14 @@ describe('StoreStress (Legacy Mode)', () => {
870 expect(print(store)).toEqual(snapshots[i]);
871
872 // Clean up after every iteration.
879 - act(() => ReactDOM.unmountComponentAtNode(container));
873 + act(() => unmount());
874 expect(print(store)).toBe('');
875 }
876 }
877 });
878
879 // @reactVersion >= 18.0
880 + // @reactVersion <= 18.2
881 it('should handle a stress test for Suspense without type change (Legacy Mode)', () => {
882 const A = () => 'a';
883 const B = () => 'b';
@@ -1176,10 +1171,12 @@ describe('StoreStress (Legacy Mode)', () => {
1171 // 1. For each step, check Suspense can render them as initial primary content.
1172 // This is the only step where we use Jest snapshots.
1173 const snapshots = [];
1179 - let container = document.createElement('div');
1174 +
1175 for (let i = 0; i < steps.length; i++) {
1176 + createContainer();
1177 +
1178 act(() =>
1182 - legacyRender(
1179 + render(
1180 <Root>
1181 <X />
1182 <React.Suspense fallback={z}>
@@ -1187,13 +1184,12 @@ describe('StoreStress (Legacy Mode)', () => {
1184 </React.Suspense>
1185 <Y />
1186 </Root>,
1190 - container,
1187 ),
1188 );
1189 // We snapshot each step once so it doesn't regress.
1190 expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
1191 snapshots.push(print(store));
1196 - act(() => ReactDOM.unmountComponentAtNode(container));
1192 + act(() => unmount());
1193 expect(print(store)).toBe('');
1194 }
1195
@@ -1202,8 +1198,10 @@ describe('StoreStress (Legacy Mode)', () => {
1198 // which is different from the snapshots above. So we take more snapshots.
1199 const fallbackSnapshots = [];
1200 for (let i = 0; i < steps.length; i++) {
1201 + createContainer();
1202 +
1203 act(() =>
1206 - legacyRender(
1204 + render(
1205 <Root>
1206 <X />
1207 <React.Suspense fallback={steps[i]}>
@@ -1213,13 +1211,12 @@ describe('StoreStress (Legacy Mode)', () => {
1211 </React.Suspense>
1212 <Y />
1213 </Root>,
1216 - container,
1214 ),
1215 );
1216 // We snapshot each step once so it doesn't regress.
1217 expect(store).toMatchInlineSnapshot(stepsSnapshotTwo[i]);
1218 fallbackSnapshots.push(print(store));
1222 - act(() => ReactDOM.unmountComponentAtNode(container));
1219 + act(() => unmount());
1220 expect(print(store)).toBe('');
1221 }
1222
@@ -1227,9 +1224,10 @@ describe('StoreStress (Legacy Mode)', () => {
1224 for (let i = 0; i < steps.length; i++) {
1225 for (let j = 0; j < steps.length; j++) {
1226 // Always start with a fresh container and steps[i].
1230 - container = document.createElement('div');
1227 + createContainer();
1228 +
1229 act(() =>
1232 - legacyRender(
1230 + render(
1231 <Root>
1232 <X />
1233 <React.Suspense fallback={z}>
@@ -1237,13 +1235,12 @@ describe('StoreStress (Legacy Mode)', () => {
1235 </React.Suspense>
1236 <Y />
1237 </Root>,
1240 - container,
1238 ),
1239 );
1240 expect(print(store)).toEqual(snapshots[i]);
1241 // Re-render with steps[j].
1242 act(() =>
1246 - legacyRender(
1243 + render(
1244 <Root>
1245 <X />
1246 <React.Suspense fallback={z}>
@@ -1251,14 +1248,13 @@ describe('StoreStress (Legacy Mode)', () => {
1248 </React.Suspense>
1249 <Y />
1250 </Root>,
1254 - container,
1251 ),
1252 );
1253 // Verify the successful transition to steps[j].
1254 expect(print(store)).toEqual(snapshots[j]);
1255 // Check that we can transition back again.
1256 act(() =>
1261 - legacyRender(
1257 + render(
1258 <Root>
1259 <X />
1260 <React.Suspense fallback={z}>
@@ -1266,12 +1262,11 @@ describe('StoreStress (Legacy Mode)', () => {
1262 </React.Suspense>
1263 <Y />
1264 </Root>,
1269 - container,
1265 ),
1266 );
1267 expect(print(store)).toEqual(snapshots[i]);
1268 // Clean up after every iteration.
1274 - act(() => ReactDOM.unmountComponentAtNode(container));
1269 + act(() => unmount());
1270 expect(print(store)).toBe('');
1271 }
1272 }
@@ -1280,9 +1275,10 @@ describe('StoreStress (Legacy Mode)', () => {
1275 for (let i = 0; i < steps.length; i++) {
1276 for (let j = 0; j < steps.length; j++) {
1277 // Always start with a fresh container and steps[i].
1283 - container = document.createElement('div');
1278 + createContainer();
1279 +
1280 act(() =>
1285 - legacyRender(
1281 + render(
1282 <Root>
1283 <X />
1284 <React.Suspense fallback={steps[i]}>
@@ -1295,13 +1291,12 @@ describe('StoreStress (Legacy Mode)', () => {
1291 </React.Suspense>
1292 <Y />
1293 </Root>,
1298 - container,
1294 ),
1295 );
1296 expect(print(store)).toEqual(fallbackSnapshots[i]);
1297 // Re-render with steps[j].
1298 act(() =>
1304 - legacyRender(
1299 + render(
1300 <Root>
1301 <X />
1302 <React.Suspense fallback={steps[j]}>
@@ -1314,14 +1309,13 @@ describe('StoreStress (Legacy Mode)', () => {
1309 </React.Suspense>
1310 <Y />
1311 </Root>,
1317 - container,
1312 ),
1313 );
1314 // Verify the successful transition to steps[j].
1315 expect(print(store)).toEqual(fallbackSnapshots[j]);
1316 // Check that we can transition back again.
1317 act(() =>
1324 - legacyRender(
1318 + render(
1319 <Root>
1320 <X />
1321 <React.Suspense fallback={steps[i]}>
@@ -1334,12 +1328,11 @@ describe('StoreStress (Legacy Mode)', () => {
1328 </React.Suspense>
1329 <Y />
1330 </Root>,
1337 - container,
1331 ),
1332 );
1333 expect(print(store)).toEqual(fallbackSnapshots[i]);
1334 // Clean up after every iteration.
1342 - act(() => ReactDOM.unmountComponentAtNode(container));
1335 + act(() => unmount());
1336 expect(print(store)).toBe('');
1337 }
1338 }
@@ -1348,9 +1341,10 @@ describe('StoreStress (Legacy Mode)', () => {
1341 for (let i = 0; i < steps.length; i++) {
1342 for (let j = 0; j < steps.length; j++) {
1343 // Always start with a fresh container and steps[i].
1351 - container = document.createElement('div');
1344 + createContainer();
1345 +
1346 act(() =>
1353 - legacyRender(
1347 + render(
1348 <Root>
1349 <X />
1350 <React.Suspense fallback={z}>
@@ -1358,13 +1352,12 @@ describe('StoreStress (Legacy Mode)', () => {
1352 </React.Suspense>
1353 <Y />
1354 </Root>,
1361 - container,
1355 ),
1356 );
1357 expect(print(store)).toEqual(snapshots[i]);
1358 // Re-render with steps[j].
1359 act(() =>
1367 - legacyRender(
1360 + render(
1361 <Root>
1362 <X />
1363 <React.Suspense fallback={steps[j]}>
@@ -1372,14 +1365,13 @@ describe('StoreStress (Legacy Mode)', () => {
1365 </React.Suspense>
1366 <Y />
1367 </Root>,
1375 - container,
1368 ),
1369 );
1370 // Verify the successful transition to steps[j].
1371 expect(print(store)).toEqual(fallbackSnapshots[j]);
1372 // Check that we can transition back again.
1373 act(() =>
1382 - legacyRender(
1374 + render(
1375 <Root>
1376 <X />
1377 <React.Suspense fallback={z}>
@@ -1387,12 +1379,11 @@ describe('StoreStress (Legacy Mode)', () => {
1379 </React.Suspense>
1380 <Y />
1381 </Root>,
1390 - container,
1382 ),
1383 );
1384 expect(print(store)).toEqual(snapshots[i]);
1385 // Clean up after every iteration.
1395 - act(() => ReactDOM.unmountComponentAtNode(container));
1386 + act(() => unmount());
1387 expect(print(store)).toBe('');
1388 }
1389 }
@@ -1401,9 +1392,10 @@ describe('StoreStress (Legacy Mode)', () => {
1392 for (let i = 0; i < steps.length; i++) {
1393 for (let j = 0; j < steps.length; j++) {
1394 // Always start with a fresh container and steps[i].
1404 - container = document.createElement('div');
1395 + createContainer();
1396 +
1397 act(() =>
1406 - legacyRender(
1398 + render(
1399 <Root>
1400 <X />
1401 <React.Suspense fallback={steps[i]}>
@@ -1411,13 +1403,12 @@ describe('StoreStress (Legacy Mode)', () => {
1403 </React.Suspense>
1404 <Y />
1405 </Root>,
1414 - container,
1406 ),
1407 );
1408 expect(print(store)).toEqual(fallbackSnapshots[i]);
1409 // Re-render with steps[j].
1410 act(() =>
1420 - legacyRender(
1411 + render(
1412 <Root>
1413 <X />
1414 <React.Suspense fallback={steps[i]}>
@@ -1425,14 +1416,13 @@ describe('StoreStress (Legacy Mode)', () => {
1416 </React.Suspense>
1417 <Y />
1418 </Root>,
1428 - container,
1419 ),
1420 );
1421 // Verify the successful transition to steps[j].
1422 expect(print(store)).toEqual(snapshots[j]);
1423 // Check that we can transition back again.
1424 act(() =>
1435 - legacyRender(
1425 + render(
1426 <Root>
1427 <X />
1428 <React.Suspense fallback={steps[i]}>
@@ -1440,12 +1430,11 @@ describe('StoreStress (Legacy Mode)', () => {
1430 </React.Suspense>
1431 <Y />
1432 </Root>,
1443 - container,
1433 ),
1434 );
1435 expect(print(store)).toEqual(fallbackSnapshots[i]);
1436 // Clean up after every iteration.
1448 - act(() => ReactDOM.unmountComponentAtNode(container));
1437 + act(() => unmount());
1438 expect(print(store)).toBe('');
1439 }
1440 }
@@ -1454,9 +1443,10 @@ describe('StoreStress (Legacy Mode)', () => {
1443 for (let i = 0; i < steps.length; i++) {
1444 for (let j = 0; j < steps.length; j++) {
1445 // Always start with a fresh container and steps[i].
1457 - container = document.createElement('div');
1446 + createContainer();
1447 +
1448 act(() =>
1459 - legacyRender(
1449 + render(
1450 <Root>
1451 <X />
1452 <React.Suspense fallback={steps[j]}>
@@ -1464,7 +1454,6 @@ describe('StoreStress (Legacy Mode)', () => {
1454 </React.Suspense>
1455 <Y />
1456 </Root>,
1467 - container,
1457 ),
1458 );
1459
@@ -1496,7 +1485,7 @@ describe('StoreStress (Legacy Mode)', () => {
1485
1486 // Trigger actual fallback.
1487 act(() =>
1499 - legacyRender(
1488 + render(
1489 <Root>
1490 <X />
1491 <React.Suspense fallback={steps[j]}>
@@ -1504,7 +1493,6 @@ describe('StoreStress (Legacy Mode)', () => {
1493 </React.Suspense>
1494 <Y />
1495 </Root>,
1507 - container,
1496 ),
1497 );
1498 expect(print(store)).toEqual(fallbackSnapshots[j]);
@@ -1522,7 +1510,7 @@ describe('StoreStress (Legacy Mode)', () => {
1510
1511 // Switch to primary mode.
1512 act(() =>
1525 - legacyRender(
1513 + render(
1514 <Root>
1515 <X />
1516 <React.Suspense fallback={steps[j]}>
@@ -1530,7 +1518,6 @@ describe('StoreStress (Legacy Mode)', () => {
1518 </React.Suspense>
1519 <Y />
1520 </Root>,
1533 - container,
1521 ),
1522 );
1523 // Fallback is still forced though.
@@ -1548,7 +1535,7 @@ describe('StoreStress (Legacy Mode)', () => {
1535 expect(print(store)).toEqual(snapshots[i]);
1536
1537 // Clean up after every iteration.
1551 - act(() => ReactDOM.unmountComponentAtNode(container));
1538 + act(() => unmount());
1539 expect(print(store)).toBe('');
1540 }
1541 }