@samitouri / QOS-React / commits / 3fa927b674

Fix some DevTools regression test actions and assertions (#34459)

Sebastian "Sebbie" Silbermann committed Sep 15, 2025 at 15:31 UTC 3fa927b6746a8666309ba1dc945f022b55b94b27
8 files changed +342 -145
packages/react-devtools-inline/__tests__/__e2e__/components.test.js
+3 -1
@@ -93,7 +93,9 @@ test.describe('Components', () => {
93
94 const name = isEditable.name
95 ? existingNameElements[0].value
96 - : existingNameElements[0].innerText;
96 + : existingNameElements[0].innerText
97 + // remove trailing colon
98 + .slice(0, -1);
99 const value = isEditable.value
100 ? existingValueElements[0].value
101 : existingValueElements[0].innerText;
packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js
+2 -2
@@ -12,8 +12,8 @@ export function test(maybeStore) {
12 }
13
14 // print() is part of Jest's serializer API
15 -export function print(store, serialize, indent) {
16 - return printStore(store);
15 +export function print(store, serialize, indent, includeSuspense = true) {
16 + return printStore(store, false, null, includeSuspense);
17 }
18
19 // Used for Jest snapshot testing.
packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+65 -28
@@ -724,34 +724,69 @@ describe('ProfilingCache', () => {
724 const rootID = store.roots[0];
725 const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
726 expect(commitData).toHaveLength(2);
727 - expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
728 - Map {
729 - 1 => 15,
730 - 2 => 15,
731 - 3 => 5,
732 - 4 => 2,
733 - }
734 - `);
735 - expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
736 - Map {
737 - 1 => 0,
738 - 2 => 10,
739 - 3 => 3,
740 - 4 => 2,
741 - }
742 - `);
743 - expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
744 - Map {
745 - 5 => 3,
746 - 3 => 3,
747 - }
748 - `);
749 - expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
750 - Map {
751 - 5 => 3,
752 - 3 => 0,
753 - }
754 - `);
727 +
728 + const isLegacySuspense = React.version.startsWith('17');
729 + if (isLegacySuspense) {
730 + expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
731 + Map {
732 + 1 => 15,
733 + 2 => 15,
734 + 3 => 5,
735 + 4 => 3,
736 + 5 => 2,
737 + }
738 + `);
739 + expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
740 + Map {
741 + 1 => 0,
742 + 2 => 10,
743 + 3 => 3,
744 + 4 => 3,
745 + 5 => 2,
746 + }
747 + `);
748 + expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
749 + Map {
750 + 6 => 3,
751 + 3 => 3,
752 + }
753 + `);
754 + expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
755 + Map {
756 + 6 => 3,
757 + 3 => 0,
758 + }
759 + `);
760 + } else {
761 + expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
762 + Map {
763 + 1 => 15,
764 + 2 => 15,
765 + 3 => 5,
766 + 4 => 2,
767 + }
768 + `);
769 + expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
770 + Map {
771 + 1 => 0,
772 + 2 => 10,
773 + 3 => 3,
774 + 4 => 2,
775 + }
776 + `);
777 + expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
778 + Map {
779 + 5 => 3,
780 + 3 => 3,
781 + }
782 + `);
783 + expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
784 + Map {
785 + 5 => 3,
786 + 3 => 0,
787 + }
788 + `);
789 + }
790 });
791
792 // @reactVersion >= 16.9
@@ -866,6 +901,7 @@ describe('ProfilingCache', () => {
901 "hocDisplayNames": null,
902 "id": 1,
903 "key": null,
904 + "stack": null,
905 "type": 11,
906 },
907 ],
@@ -908,6 +944,7 @@ describe('ProfilingCache', () => {
944 "hocDisplayNames": null,
945 "id": 1,
946 "key": null,
947 + "stack": null,
948 "type": 11,
949 },
950 ],
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+55 -13
@@ -15,10 +15,12 @@ import {
15 } from './utils';
16
17 describe('commit tree', () => {
18 - let React;
18 + let React = require('react');
19 let Scheduler;
20 let store: Store;
21 let utils;
22 + const isLegacySuspense =
23 + React.version.startsWith('16') || React.version.startsWith('17');
24
25 beforeEach(() => {
26 utils = require('./utils');
@@ -184,17 +186,32 @@ describe('commit tree', () => {
186 utils.act(() => store.profilerStore.startProfiling());
187 utils.act(() => legacyRender(<App renderChildren={true} />));
188 await Promise.resolve();
187 - expect(store).toMatchInlineSnapshot(`
188 - [root]
189 - ▾ <App>
190 - <Suspense>
191 - `);
189 + if (isLegacySuspense) {
190 + expect(store).toMatchInlineSnapshot(`
191 + [root]
192 + ▾ <App>
193 + ▾ <Suspense>
194 + <Lazy>
195 + [suspense-root] rects={null}
196 + <Suspense name="App" rects={null}>
197 + `);
198 + } else {
199 + expect(store).toMatchInlineSnapshot(`
200 + [root]
201 + ▾ <App>
202 + <Suspense>
203 + [suspense-root] rects={null}
204 + <Suspense name="App" rects={null}>
205 + `);
206 + }
207 utils.act(() => legacyRender(<App renderChildren={true} />));
208 expect(store).toMatchInlineSnapshot(`
209 [root]
210 ▾ <App>
211 ▾ <Suspense>
212 <LazyInnerComponent>
213 + [suspense-root] rects={null}
214 + <Suspense name="App" rects={null}>
215 `);
216 utils.act(() => legacyRender(<App renderChildren={false} />));
217 expect(store).toMatchInlineSnapshot(`
@@ -214,7 +231,13 @@ describe('commit tree', () => {
231 );
232 }
233
217 - expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
234 + expect(commitTrees[0].nodes.size).toBe(
235 + isLegacySuspense
236 + ? // <Root> + <App> + <Suspense> + <Lazy>
237 + 4
238 + : // <Root> + <App> + <Suspense>
239 + 3,
240 + );
241 expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
242 expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
243 });
@@ -268,11 +291,24 @@ describe('commit tree', () => {
291 it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
292 utils.act(() => store.profilerStore.startProfiling());
293 utils.act(() => legacyRender(<App renderChildren={true} />));
271 - expect(store).toMatchInlineSnapshot(`
272 - [root]
273 - ▾ <App>
274 - <Suspense>
275 - `);
294 + if (isLegacySuspense) {
295 + expect(store).toMatchInlineSnapshot(`
296 + [root]
297 + ▾ <App>
298 + ▾ <Suspense>
299 + <Lazy>
300 + [suspense-root] rects={null}
301 + <Suspense name="App" rects={null}>
302 + `);
303 + } else {
304 + expect(store).toMatchInlineSnapshot(`
305 + [root]
306 + ▾ <App>
307 + <Suspense>
308 + [suspense-root] rects={null}
309 + <Suspense name="App" rects={null}>
310 + `);
311 + }
312 utils.act(() => legacyRender(<App renderChildren={false} />));
313 expect(store).toMatchInlineSnapshot(`
314 [root]
@@ -291,7 +327,13 @@ describe('commit tree', () => {
327 );
328 }
329
294 - expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
330 + expect(commitTrees[0].nodes.size).toBe(
331 + isLegacySuspense
332 + ? // <Root> + <App> + <Suspense> + <Lazy>
333 + 4
334 + : // <Root> + <App> + <Suspense>
335 + 3,
336 + );
337 expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
338 });
339
packages/react-devtools-shared/src/__tests__/store-test.js
+42 -27
@@ -24,6 +24,35 @@ describe('Store', () => {
24 let store;
25 let withErrorsOrWarningsIgnored;
26
27 + function readValue(promise) {
28 + if (typeof React.use === 'function') {
29 + return React.use(promise);
30 + }
31 +
32 + // Support for React < 19.0
33 + switch (promise.status) {
34 + case 'fulfilled':
35 + return promise.value;
36 + case 'rejected':
37 + throw promise.reason;
38 + case 'pending':
39 + throw promise;
40 + default:
41 + promise.status = 'pending';
42 + promise.then(
43 + value => {
44 + promise.status = 'fulfilled';
45 + promise.value = value;
46 + },
47 + reason => {
48 + promise.status = 'rejected';
49 + promise.reason = reason;
50 + },
51 + );
52 + throw promise;
53 + }
54 + }
55 +
56 beforeAll(() => {
57 // JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
58 Element.prototype.getClientRects = function (this: Element) {
@@ -107,11 +136,7 @@ describe('Store', () => {
136 let Dynamic = null;
137 const Owner = () => {
138 Dynamic = <Child />;
110 - if (React.use) {
111 - React.use(promise);
112 - } else {
113 - throw promise;
114 - }
139 + readValue(promise);
140 };
141 const Parent = () => {
142 return Dynamic;
@@ -462,12 +487,9 @@ describe('Store', () => {
487 // @reactVersion >= 18.0
488 it('should display Suspense nodes properly in various states', async () => {
489 const Loading = () => <div>Loading...</div>;
490 + const never = new Promise(() => {});
491 const SuspendingComponent = () => {
466 - if (React.use) {
467 - React.use(new Promise(() => {}));
468 - } else {
469 - throw new Promise(() => {});
470 - }
492 + readValue(never);
493 };
494 const Component = () => {
495 return <div>Hello</div>;
@@ -514,12 +536,9 @@ describe('Store', () => {
536 it('should support nested Suspense nodes', async () => {
537 const Component = () => null;
538 const Loading = () => <div>Loading...</div>;
539 + const never = new Promise(() => {});
540 const Never = () => {
518 - if (React.use) {
519 - React.use(new Promise(() => {}));
520 - } else {
521 - throw new Promise(() => {});
522 - }
541 + readValue(never);
542 };
543
544 const Wrapper = ({
@@ -1019,12 +1038,9 @@ describe('Store', () => {
1038
1039 it('should display a partially rendered SuspenseList', async () => {
1040 const Loading = () => <div>Loading...</div>;
1041 + const never = new Promise(() => {});
1042 const SuspendingComponent = () => {
1023 - if (React.use) {
1024 - React.use(new Promise(() => {}));
1025 - } else {
1026 - throw new Promise(() => {});
1027 - }
1043 + readValue(never);
1044 };
1045 const Component = () => {
1046 return <div>Hello</div>;
@@ -1379,12 +1395,9 @@ describe('Store', () => {
1395 // @reactVersion >= 18.0
1396 it('should display Suspense nodes properly in various states', async () => {
1397 const Loading = () => <div>Loading...</div>;
1398 + const never = new Promise(() => {});
1399 const SuspendingComponent = () => {
1383 - if (React.use) {
1384 - React.use(new Promise(() => {}));
1385 - } else {
1386 - throw new Promise(() => {});
1387 - }
1400 + readValue(never);
1401 };
1402 const Component = () => {
1403 return <div>Hello</div>;
@@ -2081,6 +2094,8 @@ describe('Store', () => {
2094 [root]
2095 ▾ <App>
2096 <Suspense>
2097 + [suspense-root] rects={null}
2098 + <Suspense name="App" rects={null}>
2099 `);
2100
2101 // Render again to unmount it before it finishes loading
@@ -2826,7 +2841,7 @@ describe('Store', () => {
2841
2842 function Component({children, promise}) {
2843 if (promise) {
2829 - React.use(promise);
2844 + readValue(promise);
2845 }
2846 return <div>{children}</div>;
2847 }
@@ -2901,7 +2916,7 @@ describe('Store', () => {
2916
2917 function Component({children, promise}) {
2918 if (promise) {
2904 - React.use(promise);
2919 + readValue(promise);
2920 }
2921 return <div>{children}</div>;
2922 }
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+1 -1
@@ -134,7 +134,7 @@ describe('Store component filters', () => {
134 `);
135 });
136
137 - // @reactVersion >= 16.0
137 + // @reactVersion >= 16.6
138 it('should filter Suspense', async () => {
139 const Suspense = React.Suspense;
140 await actAsync(async () =>
packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+161 -67
@@ -16,6 +16,35 @@ describe('StoreStress (Legacy Mode)', () => {
16 let store;
17 let print;
18
19 + function readValue(promise) {
20 + if (typeof React.use === 'function') {
21 + return React.use(promise);
22 + }
23 +
24 + // Support for React < 19.0
25 + switch (promise.status) {
26 + case 'fulfilled':
27 + return promise.value;
28 + case 'rejected':
29 + throw promise.reason;
30 + case 'pending':
31 + throw promise;
32 + default:
33 + promise.status = 'pending';
34 + promise.then(
35 + value => {
36 + promise.status = 'fulfilled';
37 + promise.value = value;
38 + },
39 + reason => {
40 + promise.status = 'rejected';
41 + promise.reason = reason;
42 + },
43 + );
44 + throw promise;
45 + }
46 + }
47 +
48 beforeEach(() => {
49 bridge = global.bridge;
50 store = global.store;
@@ -415,118 +444,116 @@ describe('StoreStress (Legacy Mode)', () => {
444 a,
445 ];
446
447 + // Excluding Suspense tree here due to different measurement semantics for fallbacks
448 const stepsSnapshot = [
449 `
420 - [root]
450 + "[root]
451 ▾ <Root>
452 <X>
453 ▾ <Suspense>
454 <A key="a">
425 - <Y>
455 + <Y>"
456 `,
457 `
428 - [root]
458 + "[root]
459 ▾ <Root>
460 <X>
461 ▾ <Suspense>
462 <A key="a">
433 - <Y>
463 + <Y>"
464 `,
465 `
436 - [root]
466 + "[root]
467 ▾ <Root>
468 <X>
469 ▾ <Suspense>
470 <A key="a">
471 <B key="b">
472 <C key="c">
443 - <Y>
473 + <Y>"
474 `,
475 `
446 - [root]
476 + "[root]
477 ▾ <Root>
478 <X>
479 ▾ <Suspense>
480 <C key="c">
481 <B key="b">
482 <A key="a">
453 - <Y>
483 + <Y>"
484 `,
485 `
456 - [root]
486 + "[root]
487 ▾ <Root>
488 <X>
489 ▾ <Suspense>
490 <C key="c">
491 <A key="a">
462 - <Y>
492 + <Y>"
493 `,
494 `
465 - [root]
495 + "[root]
496 ▾ <Root>
497 <X>
498 ▾ <Suspense>
499 <C key="c">
500 <A key="a">
471 - <Y>
501 + <Y>"
502 `,
503 `
474 - [root]
504 + "[root]
505 ▾ <Root>
506 <X>
507 ▾ <Suspense>
508 <C key="c">
509 <A key="a">
480 - <Y>
510 + <Y>"
511 `,
512 `
483 - [root]
513 + "[root]
514 ▾ <Root>
515 <X>
516 ▾ <Suspense>
517 <A key="a">
518 <B key="b">
489 - <Y>
519 + <Y>"
520 `,
521 `
492 - [root]
522 + "[root]
523 ▾ <Root>
524 <X>
525 ▾ <Suspense>
526 <A key="a">
497 - <Y>
527 + <Y>"
528 `,
529 `
500 - [root]
530 + "[root]
531 ▾ <Root>
532 <X>
533 <Suspense>
504 - <Y>
534 + <Y>"
535 `,
536 `
507 - [root]
537 + "[root]
538 ▾ <Root>
539 <X>
540 ▾ <Suspense>
541 <B key="b">
512 - <Y>
542 + <Y>"
543 `,
544 `
515 - [root]
545 + "[root]
546 ▾ <Root>
547 <X>
548 ▾ <Suspense>
549 <A key="a">
520 - <Y>
550 + <Y>"
551 `,
552 ];
553
554 + const never = new Promise(() => {});
555 const Never = () => {
525 - if (React.use) {
526 - React.use(new Promise(() => {}));
527 - } else {
528 - throw new Promise(() => {});
529 - }
556 + readValue(never);
557 };
558
559 const Root = ({children}) => {
@@ -549,8 +576,10 @@ describe('StoreStress (Legacy Mode)', () => {
576 ),
577 );
578 // We snapshot each step once so it doesn't regress.
552 - expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
553 - snapshots.push(print(store));
579 + expect(print(store, undefined, undefined, false)).toMatchInlineSnapshot(
580 + stepsSnapshot[i],
581 + );
582 + snapshots.push(print(store, undefined, undefined, false));
583 act(() => unmount());
584 expect(print(store)).toBe('');
585 }
@@ -572,7 +601,7 @@ describe('StoreStress (Legacy Mode)', () => {
601 </Root>,
602 ),
603 );
575 - expect(print(store)).toEqual(snapshots[i]);
604 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
605 act(() => unmount());
606 expect(print(store)).toBe('');
607 }
@@ -592,7 +621,7 @@ describe('StoreStress (Legacy Mode)', () => {
621 </Root>,
622 ),
623 );
595 - expect(print(store)).toEqual(snapshots[i]);
624 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
625 // Re-render with steps[j].
626 act(() =>
627 render(
@@ -604,7 +633,7 @@ describe('StoreStress (Legacy Mode)', () => {
633 ),
634 );
635 // Verify the successful transition to steps[j].
607 - expect(print(store)).toEqual(snapshots[j]);
636 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
637 // Check that we can transition back again.
638 act(() =>
639 render(
@@ -615,7 +644,7 @@ describe('StoreStress (Legacy Mode)', () => {
644 </Root>,
645 ),
646 );
618 - expect(print(store)).toEqual(snapshots[i]);
647 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
648 // Clean up after every iteration.
649 act(() => unmount());
650 expect(print(store)).toBe('');
@@ -641,7 +670,7 @@ describe('StoreStress (Legacy Mode)', () => {
670 </Root>,
671 ),
672 );
644 - expect(print(store)).toEqual(snapshots[i]);
673 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
674 // Re-render with steps[j].
675 act(() =>
676 render(
@@ -657,7 +686,7 @@ describe('StoreStress (Legacy Mode)', () => {
686 ),
687 );
688 // Verify the successful transition to steps[j].
660 - expect(print(store)).toEqual(snapshots[j]);
689 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
690 // Check that we can transition back again.
691 act(() =>
692 render(
@@ -672,7 +701,7 @@ describe('StoreStress (Legacy Mode)', () => {
701 </Root>,
702 ),
703 );
675 - expect(print(store)).toEqual(snapshots[i]);
704 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
705 // Clean up after every iteration.
706 act(() => unmount());
707 expect(print(store)).toBe('');
@@ -694,7 +723,7 @@ describe('StoreStress (Legacy Mode)', () => {
723 </Root>,
724 ),
725 );
697 - expect(print(store)).toEqual(snapshots[i]);
726 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
727 // Re-render with steps[j].
728 act(() =>
729 render(
@@ -710,7 +739,7 @@ describe('StoreStress (Legacy Mode)', () => {
739 ),
740 );
741 // Verify the successful transition to steps[j].
713 - expect(print(store)).toEqual(snapshots[j]);
742 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
743 // Check that we can transition back again.
744 act(() =>
745 render(
@@ -721,7 +750,7 @@ describe('StoreStress (Legacy Mode)', () => {
750 </Root>,
751 ),
752 );
724 - expect(print(store)).toEqual(snapshots[i]);
753 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
754 // Clean up after every iteration.
755 act(() => unmount());
756 expect(print(store)).toBe('');
@@ -747,7 +776,7 @@ describe('StoreStress (Legacy Mode)', () => {
776 </Root>,
777 ),
778 );
750 - expect(print(store)).toEqual(snapshots[i]);
779 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
780 // Re-render with steps[j].
781 act(() =>
782 render(
@@ -759,7 +788,7 @@ describe('StoreStress (Legacy Mode)', () => {
788 ),
789 );
790 // Verify the successful transition to steps[j].
762 - expect(print(store)).toEqual(snapshots[j]);
791 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
792 // Check that we can transition back again.
793 act(() =>
794 render(
@@ -774,7 +803,7 @@ describe('StoreStress (Legacy Mode)', () => {
803 </Root>,
804 ),
805 );
777 - expect(print(store)).toEqual(snapshots[i]);
806 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
807 // Clean up after every iteration.
808 act(() => unmount());
809 expect(print(store)).toBe('');
@@ -803,7 +832,7 @@ describe('StoreStress (Legacy Mode)', () => {
832 const suspenseID = store.getElementIDAtIndex(2);
833
834 // Force fallback.
806 - expect(print(store)).toEqual(snapshots[i]);
835 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
836 act(() => {
837 bridge.send('overrideSuspense', {
838 id: suspenseID,
@@ -811,7 +840,7 @@ describe('StoreStress (Legacy Mode)', () => {
840 forceFallback: true,
841 });
842 });
814 - expect(print(store)).toEqual(snapshots[j]);
843 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
844
845 // Stop forcing fallback.
846 act(() => {
@@ -821,7 +850,7 @@ describe('StoreStress (Legacy Mode)', () => {
850 forceFallback: false,
851 });
852 });
824 - expect(print(store)).toEqual(snapshots[i]);
853 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
854
855 // Trigger actual fallback.
856 act(() =>
@@ -837,7 +866,7 @@ describe('StoreStress (Legacy Mode)', () => {
866 </Root>,
867 ),
868 );
840 - expect(print(store)).toEqual(snapshots[j]);
869 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
870
871 // Force fallback while we're in fallback mode.
872 act(() => {
@@ -848,7 +877,7 @@ describe('StoreStress (Legacy Mode)', () => {
877 });
878 });
879 // Keep seeing fallback content.
851 - expect(print(store)).toEqual(snapshots[j]);
880 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
881
882 // Switch to primary mode.
883 act(() =>
@@ -861,7 +890,7 @@ describe('StoreStress (Legacy Mode)', () => {
890 ),
891 );
892 // Fallback is still forced though.
864 - expect(print(store)).toEqual(snapshots[j]);
893 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
894
895 // Stop forcing fallback. This reverts to primary content.
896 act(() => {
@@ -872,7 +901,7 @@ describe('StoreStress (Legacy Mode)', () => {
901 });
902 });
903 // Now we see primary content.
875 - expect(print(store)).toEqual(snapshots[i]);
904 + expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
905
906 // Clean up after every iteration.
907 act(() => unmount());
@@ -921,6 +950,8 @@ describe('StoreStress (Legacy Mode)', () => {
950 <A key="a">
951 <Z>
952 <Y>
953 + [suspense-root] rects={[]}
954 + <Suspense name="Unknown" rects={[]}>
955 `,
956 `
957 [root]
@@ -931,6 +962,8 @@ describe('StoreStress (Legacy Mode)', () => {
962 <A key="a">
963 <Z>
964 <Y>
965 + [suspense-root] rects={[]}
966 + <Suspense name="Unknown" rects={[]}>
967 `,
968 `
969 [root]
@@ -943,6 +976,8 @@ describe('StoreStress (Legacy Mode)', () => {
976 <C key="c">
977 <Z>
978 <Y>
979 + [suspense-root] rects={[]}
980 + <Suspense name="Unknown" rects={[]}>
981 `,
982 `
983 [root]
@@ -955,6 +990,8 @@ describe('StoreStress (Legacy Mode)', () => {
990 <A key="a">
991 <Z>
992 <Y>
993 + [suspense-root] rects={[]}
994 + <Suspense name="Unknown" rects={[]}>
995 `,
996 `
997 [root]
@@ -966,6 +1003,8 @@ describe('StoreStress (Legacy Mode)', () => {
1003 <A key="a">
1004 <Z>
1005 <Y>
1006 + [suspense-root] rects={[]}
1007 + <Suspense name="Unknown" rects={[]}>
1008 `,
1009 `
1010 [root]
@@ -977,6 +1016,8 @@ describe('StoreStress (Legacy Mode)', () => {
1016 <A key="a">
1017 <Z>
1018 <Y>
1019 + [suspense-root] rects={[]}
1020 + <Suspense name="Unknown" rects={[]}>
1021 `,
1022 `
1023 [root]
@@ -988,6 +1029,8 @@ describe('StoreStress (Legacy Mode)', () => {
1029 <A key="a">
1030 <Z>
1031 <Y>
1032 + [suspense-root] rects={[]}
1033 + <Suspense name="Unknown" rects={[]}>
1034 `,
1035 `
1036 [root]
@@ -999,6 +1042,8 @@ describe('StoreStress (Legacy Mode)', () => {
1042 <B key="b">
1043 <Z>
1044 <Y>
1045 + [suspense-root] rects={[]}
1046 + <Suspense name="Unknown" rects={[]}>
1047 `,
1048 `
1049 [root]
@@ -1009,6 +1054,8 @@ describe('StoreStress (Legacy Mode)', () => {
1054 <A key="a">
1055 <Z>
1056 <Y>
1057 + [suspense-root] rects={[]}
1058 + <Suspense name="Unknown" rects={[]}>
1059 `,
1060 `
1061 [root]
@@ -1018,6 +1065,8 @@ describe('StoreStress (Legacy Mode)', () => {
1065 ▾ <MaybeSuspend>
1066 <Z>
1067 <Y>
1068 + [suspense-root] rects={[]}
1069 + <Suspense name="Unknown" rects={[]}>
1070 `,
1071 `
1072 [root]
@@ -1028,6 +1077,8 @@ describe('StoreStress (Legacy Mode)', () => {
1077 <B key="b">
1078 <Z>
1079 <Y>
1080 + [suspense-root] rects={[]}
1081 + <Suspense name="Unknown" rects={[]}>
1082 `,
1083 `
1084 [root]
@@ -1038,6 +1089,8 @@ describe('StoreStress (Legacy Mode)', () => {
1089 <A key="a">
1090 <Z>
1091 <Y>
1092 + [suspense-root] rects={[]}
1093 + <Suspense name="Unknown" rects={[]}>
1094 `,
1095 ];
1096
@@ -1049,6 +1102,8 @@ describe('StoreStress (Legacy Mode)', () => {
1102 ▾ <Suspense>
1103 <A key="a">
1104 <Y>
1105 + [suspense-root] rects={[]}
1106 + <Suspense name="Unknown" rects={null}>
1107 `,
1108 `
1109 [root]
@@ -1057,6 +1112,8 @@ describe('StoreStress (Legacy Mode)', () => {
1112 ▾ <Suspense>
1113 <A key="a">
1114 <Y>
1115 + [suspense-root] rects={[]}
1116 + <Suspense name="Unknown" rects={null}>
1117 `,
1118 `
1119 [root]
@@ -1067,6 +1124,8 @@ describe('StoreStress (Legacy Mode)', () => {
1124 <B key="b">
1125 <C key="c">
1126 <Y>
1127 + [suspense-root] rects={[]}
1128 + <Suspense name="Unknown" rects={null}>
1129 `,
1130 `
1131 [root]
@@ -1077,6 +1136,8 @@ describe('StoreStress (Legacy Mode)', () => {
1136 <B key="b">
1137 <A key="a">
1138 <Y>
1139 + [suspense-root] rects={[]}
1140 + <Suspense name="Unknown" rects={null}>
1141 `,
1142 `
1143 [root]
@@ -1086,6 +1147,8 @@ describe('StoreStress (Legacy Mode)', () => {
1147 <C key="c">
1148 <A key="a">
1149 <Y>
1150 + [suspense-root] rects={[]}
1151 + <Suspense name="Unknown" rects={null}>
1152 `,
1153 `
1154 [root]
@@ -1095,6 +1158,8 @@ describe('StoreStress (Legacy Mode)', () => {
1158 <C key="c">
1159 <A key="a">
1160 <Y>
1161 + [suspense-root] rects={[]}
1162 + <Suspense name="Unknown" rects={null}>
1163 `,
1164 `
1165 [root]
@@ -1104,6 +1169,8 @@ describe('StoreStress (Legacy Mode)', () => {
1169 <C key="c">
1170 <A key="a">
1171 <Y>
1172 + [suspense-root] rects={[]}
1173 + <Suspense name="Unknown" rects={null}>
1174 `,
1175 `
1176 [root]
@@ -1113,6 +1180,8 @@ describe('StoreStress (Legacy Mode)', () => {
1180 <A key="a">
1181 <B key="b">
1182 <Y>
1183 + [suspense-root] rects={[]}
1184 + <Suspense name="Unknown" rects={null}>
1185 `,
1186 `
1187 [root]
@@ -1121,6 +1190,8 @@ describe('StoreStress (Legacy Mode)', () => {
1190 ▾ <Suspense>
1191 <A key="a">
1192 <Y>
1193 + [suspense-root] rects={[]}
1194 + <Suspense name="Unknown" rects={null}>
1195 `,
1196 `
1197 [root]
@@ -1128,6 +1199,8 @@ describe('StoreStress (Legacy Mode)', () => {
1199 <X>
1200 <Suspense>
1201 <Y>
1202 + [suspense-root] rects={[]}
1203 + <Suspense name="Unknown" rects={null}>
1204 `,
1205 `
1206 [root]
@@ -1136,6 +1209,8 @@ describe('StoreStress (Legacy Mode)', () => {
1209 ▾ <Suspense>
1210 <B key="b">
1211 <Y>
1212 + [suspense-root] rects={[]}
1213 + <Suspense name="Unknown" rects={null}>
1214 `,
1215 `
1216 [root]
@@ -1144,15 +1219,14 @@ describe('StoreStress (Legacy Mode)', () => {
1219 ▾ <Suspense>
1220 <A key="a">
1221 <Y>
1222 + [suspense-root] rects={[]}
1223 + <Suspense name="Unknown" rects={null}>
1224 `,
1225 ];
1226
1227 + const never = new Promise(() => {});
1228 const Never = () => {
1151 - if (React.use) {
1152 - React.use(new Promise(() => {}));
1153 - } else {
1154 - throw new Promise(() => {});
1155 - }
1229 + readValue(never);
1230 };
1231
1232 const MaybeSuspend = ({children, suspend}) => {
@@ -1224,7 +1298,7 @@ describe('StoreStress (Legacy Mode)', () => {
1298 );
1299 // We snapshot each step once so it doesn't regress.
1300 expect(store).toMatchInlineSnapshot(stepsSnapshotTwo[i]);
1227 - fallbackSnapshots.push(print(store));
1301 + fallbackSnapshots.push(print(store, undefined, undefined, false));
1302 act(() => unmount());
1303 expect(print(store)).toBe('');
1304 }
@@ -1302,7 +1376,9 @@ describe('StoreStress (Legacy Mode)', () => {
1376 </Root>,
1377 ),
1378 );
1305 - expect(print(store)).toEqual(fallbackSnapshots[i]);
1379 + expect(print(store, undefined, undefined, false)).toEqual(
1380 + fallbackSnapshots[i],
1381 + );
1382 // Re-render with steps[j].
1383 act(() =>
1384 render(
@@ -1321,7 +1397,9 @@ describe('StoreStress (Legacy Mode)', () => {
1397 ),
1398 );
1399 // Verify the successful transition to steps[j].
1324 - expect(print(store)).toEqual(fallbackSnapshots[j]);
1400 + expect(print(store, undefined, undefined, false)).toEqual(
1401 + fallbackSnapshots[j],
1402 + );
1403 // Check that we can transition back again.
1404 act(() =>
1405 render(
@@ -1339,7 +1417,9 @@ describe('StoreStress (Legacy Mode)', () => {
1417 </Root>,
1418 ),
1419 );
1342 - expect(print(store)).toEqual(fallbackSnapshots[i]);
1420 + expect(print(store, undefined, undefined, false)).toEqual(
1421 + fallbackSnapshots[i],
1422 + );
1423 // Clean up after every iteration.
1424 act(() => unmount());
1425 expect(print(store)).toBe('');
@@ -1377,7 +1457,9 @@ describe('StoreStress (Legacy Mode)', () => {
1457 ),
1458 );
1459 // Verify the successful transition to steps[j].
1380 - expect(print(store)).toEqual(fallbackSnapshots[j]);
1460 + expect(print(store, undefined, undefined, false)).toEqual(
1461 + fallbackSnapshots[j],
1462 + );
1463 // Check that we can transition back again.
1464 act(() =>
1465 render(
@@ -1414,7 +1496,9 @@ describe('StoreStress (Legacy Mode)', () => {
1496 </Root>,
1497 ),
1498 );
1417 - expect(print(store)).toEqual(fallbackSnapshots[i]);
1499 + expect(print(store, undefined, undefined, false)).toEqual(
1500 + fallbackSnapshots[i],
1501 + );
1502 // Re-render with steps[j].
1503 act(() =>
1504 render(
@@ -1441,7 +1525,9 @@ describe('StoreStress (Legacy Mode)', () => {
1525 </Root>,
1526 ),
1527 );
1444 - expect(print(store)).toEqual(fallbackSnapshots[i]);
1528 + expect(print(store, undefined, undefined, false)).toEqual(
1529 + fallbackSnapshots[i],
1530 + );
1531 // Clean up after every iteration.
1532 act(() => unmount());
1533 expect(print(store)).toBe('');
@@ -1480,7 +1566,9 @@ describe('StoreStress (Legacy Mode)', () => {
1566 forceFallback: true,
1567 });
1568 });
1483 - expect(print(store)).toEqual(fallbackSnapshots[j]);
1569 + expect(print(store, undefined, undefined, false)).toEqual(
1570 + fallbackSnapshots[j],
1571 + );
1572
1573 // Stop forcing fallback.
1574 act(() => {
@@ -1504,7 +1592,9 @@ describe('StoreStress (Legacy Mode)', () => {
1592 </Root>,
1593 ),
1594 );
1507 - expect(print(store)).toEqual(fallbackSnapshots[j]);
1595 + expect(print(store, undefined, undefined, false)).toEqual(
1596 + fallbackSnapshots[j],
1597 + );
1598
1599 // Force fallback while we're in fallback mode.
1600 act(() => {
@@ -1515,7 +1605,9 @@ describe('StoreStress (Legacy Mode)', () => {
1605 });
1606 });
1607 // Keep seeing fallback content.
1518 - expect(print(store)).toEqual(fallbackSnapshots[j]);
1608 + expect(print(store, undefined, undefined, false)).toEqual(
1609 + fallbackSnapshots[j],
1610 + );
1611
1612 // Switch to primary mode.
1613 act(() =>
@@ -1530,7 +1622,9 @@ describe('StoreStress (Legacy Mode)', () => {
1622 ),
1623 );
1624 // Fallback is still forced though.
1533 - expect(print(store)).toEqual(fallbackSnapshots[j]);
1625 + expect(print(store, undefined, undefined, false)).toEqual(
1626 + fallbackSnapshots[j],
1627 + );
1628
1629 // Stop forcing fallback. This reverts to primary content.
1630 act(() => {
scripts/jest/preprocessor.js
+13 -6
@@ -80,7 +80,19 @@ module.exports = {
80
81 // This is only for React DevTools tests with React 16.x
82 // `react/jsx-dev-runtime` and `react/jsx-runtime` are included in the package starting from v17
83 - if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
83 + // Technically 16.14 and 15.7 have the new runtime but we're not testing those versions.
84 + if (
85 + semver.gte(ReactVersionTestingAgainst, '15.0.0') &&
86 + semver.lt(ReactVersionTestingAgainst, '17.0.0')
87 + ) {
88 + plugins.push(
89 + [
90 + require.resolve('@babel/plugin-transform-react-jsx'),
91 + {runtime: 'classic'},
92 + ],
93 + require.resolve('@babel/plugin-transform-react-jsx-source')
94 + );
95 + } else {
96 plugins.push([
97 process.env.NODE_ENV === 'development'
98 ? require.resolve('@babel/plugin-transform-react-jsx-development')
@@ -89,11 +101,6 @@ module.exports = {
101 // would be React.createElement.
102 {runtime: 'automatic'},
103 ]);
92 - } else {
93 - plugins.push(
94 - require.resolve('@babel/plugin-transform-react-jsx'),
95 - require.resolve('@babel/plugin-transform-react-jsx-source')
96 - );
104 }
105
106 plugins.push(pathToTransformLazyJSXImport);