Skip to content

Commit 3fa927b

Browse files
eps1loneps1lon
authored
Fix some DevTools regression test actions and assertions (#34459)
1 parent 47664de commit 3fa927b

File tree

8 files changed

+342
-145
lines changed

8 files changed

+342
-145
lines changed

‎packages/react-devtools-inline/__tests__/__e2e__/components.test.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@ test.describe('Components', () => {
9393

9494
const name = isEditable.name
9595
? existingNameElements[0].value
96-
: existingNameElements[0].innerText;
96+
: existingNameElements[0].innerText
97+
// remove trailing colon
98+
.slice(0, -1);
9799
const value = isEditable.value
98100
? existingValueElements[0].value
99101
: existingValueElements[0].innerText;

‎packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export function test(maybeStore) {
1212
}
1313

1414
// 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);
1717
}
1818

1919
// Used for Jest snapshot testing.

‎packages/react-devtools-shared/src/__tests__/profilingCache-test.js‎

Lines changed: 65 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -724,34 +724,69 @@ describe('ProfilingCache', () => {
724724
const rootID = store.roots[0];
725725
const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
726726
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+
}
755790
});
756791

757792
// @reactVersion >= 16.9
@@ -866,6 +901,7 @@ describe('ProfilingCache', () => {
866901
"hocDisplayNames": null,
867902
"id": 1,
868903
"key": null,
904+
"stack": null,
869905
"type": 11,
870906
},
871907
],
@@ -908,6 +944,7 @@ describe('ProfilingCache', () => {
908944
"hocDisplayNames": null,
909945
"id": 1,
910946
"key": null,
947+
"stack": null,
911948
"type": 11,
912949
},
913950
],

‎packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js‎

Lines changed: 55 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ import {
1515
} from './utils';
1616

1717
describe('commit tree', () => {
18-
let React;
18+
let React = require('react');
1919
let Scheduler;
2020
let store: Store;
2121
let utils;
22+
const isLegacySuspense =
23+
React.version.startsWith('16') || React.version.startsWith('17');
2224

2325
beforeEach(() => {
2426
utils = require('./utils');
@@ -184,17 +186,32 @@ describe('commit tree', () => {
184186
utils.act(() => store.profilerStore.startProfiling());
185187
utils.act(() => legacyRender(<App renderChildren={true} />));
186188
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+
}
192207
utils.act(() => legacyRender(<App renderChildren={true} />));
193208
expect(store).toMatchInlineSnapshot(`
194209
[root]
195210
▾ <App>
196211
▾ <Suspense>
197212
<LazyInnerComponent>
213+
[suspense-root] rects={null}
214+
<Suspense name="App" rects={null}>
198215
`);
199216
utils.act(() => legacyRender(<App renderChildren={false} />));
200217
expect(store).toMatchInlineSnapshot(`
@@ -214,7 +231,13 @@ describe('commit tree', () => {
214231
);
215232
}
216233

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+
);
218241
expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
219242
expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
220243
});
@@ -268,11 +291,24 @@ describe('commit tree', () => {
268291
it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
269292
utils.act(() => store.profilerStore.startProfiling());
270293
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+
}
276312
utils.act(() => legacyRender(<App renderChildren={false} />));
277313
expect(store).toMatchInlineSnapshot(`
278314
[root]
@@ -291,7 +327,13 @@ describe('commit tree', () => {
291327
);
292328
}
293329

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+
);
295337
expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
296338
});
297339

‎packages/react-devtools-shared/src/__tests__/store-test.js‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,35 @@ describe('Store', () => {
2424
let store;
2525
let withErrorsOrWarningsIgnored;
2626

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+
2756
beforeAll(() => {
2857
// JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
2958
Element.prototype.getClientRects = function (this: Element) {
@@ -107,11 +136,7 @@ describe('Store', () => {
107136
let Dynamic = null;
108137
const Owner = () => {
109138
Dynamic = <Child />;
110-
if (React.use) {
111-
React.use(promise);
112-
} else {
113-
throw promise;
114-
}
139+
readValue(promise);
115140
};
116141
const Parent = () => {
117142
return Dynamic;
@@ -462,12 +487,9 @@ describe('Store', () => {
462487
// @reactVersion >= 18.0
463488
it('should display Suspense nodes properly in various states', async () => {
464489
const Loading = () => <div>Loading...</div>;
490+
const never = new Promise(() => {});
465491
const SuspendingComponent = () => {
466-
if (React.use) {
467-
React.use(new Promise(() => {}));
468-
} else {
469-
throw new Promise(() => {});
470-
}
492+
readValue(never);
471493
};
472494
const Component = () => {
473495
return <div>Hello</div>;
@@ -514,12 +536,9 @@ describe('Store', () => {
514536
it('should support nested Suspense nodes', async () => {
515537
const Component = () => null;
516538
const Loading = () => <div>Loading...</div>;
539+
const never = new Promise(() => {});
517540
const Never = () => {
518-
if (React.use) {
519-
React.use(new Promise(() => {}));
520-
} else {
521-
throw new Promise(() => {});
522-
}
541+
readValue(never);
523542
};
524543

525544
const Wrapper = ({
@@ -1019,12 +1038,9 @@ describe('Store', () => {
10191038

10201039
it('should display a partially rendered SuspenseList', async () => {
10211040
const Loading = () => <div>Loading...</div>;
1041+
const never = new Promise(() => {});
10221042
const SuspendingComponent = () => {
1023-
if (React.use) {
1024-
React.use(new Promise(() => {}));
1025-
} else {
1026-
throw new Promise(() => {});
1027-
}
1043+
readValue(never);
10281044
};
10291045
const Component = () => {
10301046
return <div>Hello</div>;
@@ -1379,12 +1395,9 @@ describe('Store', () => {
13791395
// @reactVersion >= 18.0
13801396
it('should display Suspense nodes properly in various states', async () => {
13811397
const Loading = () => <div>Loading...</div>;
1398+
const never = new Promise(() => {});
13821399
const SuspendingComponent = () => {
1383-
if (React.use) {
1384-
React.use(new Promise(() => {}));
1385-
} else {
1386-
throw new Promise(() => {});
1387-
}
1400+
readValue(never);
13881401
};
13891402
const Component = () => {
13901403
return <div>Hello</div>;
@@ -2081,6 +2094,8 @@ describe('Store', () => {
20812094
[root]
20822095
▾ <App>
20832096
<Suspense>
2097+
[suspense-root] rects={null}
2098+
<Suspense name="App" rects={null}>
20842099
`);
20852100

20862101
// Render again to unmount it before it finishes loading
@@ -2826,7 +2841,7 @@ describe('Store', () => {
28262841

28272842
function Component({children, promise}) {
28282843
if (promise) {
2829-
React.use(promise);
2844+
readValue(promise);
28302845
}
28312846
return <div>{children}</div>;
28322847
}
@@ -2901,7 +2916,7 @@ describe('Store', () => {
29012916

29022917
function Component({children, promise}) {
29032918
if (promise) {
2904-
React.use(promise);
2919+
readValue(promise);
29052920
}
29062921
return <div>{children}</div>;
29072922
}

‎packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ describe('Store component filters', () => {
134134
`);
135135
});
136136

137-
// @reactVersion >= 16.0
137+
// @reactVersion >= 16.6
138138
it('should filter Suspense', async () => {
139139
const Suspense = React.Suspense;
140140
await actAsync(async () =>

0 commit comments

Comments
 (0)