Skip to content

Commit 8a83073

Browse files
authored
[test] Fix DevTools regression tests (facebook#35501)
1 parent 5aec1b2 commit 8a83073

File tree

1 file changed

+93
-2
lines changed

1 file changed

+93
-2
lines changed

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

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
* @flow
88
*/
99

10+
import semver from 'semver';
11+
1012
import {getVersionedRenderImplementation} from './utils';
13+
import {ReactVersion} from '../../../../ReactVersions';
14+
15+
const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
1116

1217
describe('Store', () => {
1318
let React;
@@ -3143,8 +3148,9 @@ describe('Store', () => {
31433148
expect(store).toMatchInlineSnapshot(``);
31443149
});
31453150

3146-
// @reactVersion >= 17.0
3147-
it('should track suspended by in filtered fallback', async () => {
3151+
// Can't suspend the root in React 17.
3152+
// @reactVersion >= 18.0
3153+
it('should track suspended-by in filtered fallback suspending the root', async () => {
31483154
function IgnoreMe({promise}) {
31493155
return readValue(promise);
31503156
}
@@ -3196,6 +3202,91 @@ describe('Store', () => {
31963202
`);
31973203
});
31983204

3205+
// @reactVersion >= 17.0
3206+
it('should track suspended-by in filtered fallback', async () => {
3207+
function IgnoreMe({promise}) {
3208+
return readValue(promise);
3209+
}
3210+
3211+
function Component({promise}) {
3212+
if (promise) {
3213+
return readValue(promise);
3214+
}
3215+
return null;
3216+
}
3217+
3218+
await actAsync(
3219+
async () =>
3220+
(store.componentFilters = [createDisplayNameFilter('^IgnoreMe', true)]),
3221+
);
3222+
3223+
let resolveFallback;
3224+
const fallbackPromise = new Promise(resolve => {
3225+
resolveFallback = resolve;
3226+
});
3227+
let resolveContent;
3228+
const contentPromise = new Promise(resolve => {
3229+
resolveContent = resolve;
3230+
});
3231+
3232+
await actAsync(() =>
3233+
render(
3234+
<React.Suspense
3235+
fallback={<Component key="root-fallback" />}
3236+
name="root">
3237+
<React.Suspense
3238+
name="main"
3239+
fallback={<IgnoreMe promise={fallbackPromise} />}>
3240+
<Component promise={contentPromise} />
3241+
</React.Suspense>
3242+
</React.Suspense>,
3243+
),
3244+
);
3245+
3246+
if (semver.lt(ReactVersionTestingAgainst, '18.0.0')) {
3247+
// React 17 commits partial trees hidden which causes the "main"
3248+
// Suspense boundary to be included.
3249+
// React 18 and upwards excluded partial tree entirely.
3250+
expect(store).toMatchInlineSnapshot(`
3251+
[root]
3252+
▾ <Suspense name="root">
3253+
<Component key="root-fallback">
3254+
[suspense-root] rects={null}
3255+
<Suspense name="root" rects={null}>
3256+
<Suspense name="main" rects={null}>
3257+
`);
3258+
} else {
3259+
expect(store).toMatchInlineSnapshot(`
3260+
[root]
3261+
▾ <Suspense name="root">
3262+
<Component key="root-fallback">
3263+
[suspense-root] rects={null}
3264+
<Suspense name="root" rects={null}>
3265+
`);
3266+
}
3267+
3268+
await actAsync(() => resolveFallback('loading'));
3269+
expect(store).toMatchInlineSnapshot(`
3270+
[root]
3271+
▾ <Suspense name="root">
3272+
<Suspense name="main">
3273+
[suspense-root] rects={null}
3274+
<Suspense name="root" rects={null}>
3275+
<Suspense name="main" rects={null}>
3276+
`);
3277+
3278+
await actAsync(() => resolveContent('content'));
3279+
expect(store).toMatchInlineSnapshot(`
3280+
[root]
3281+
▾ <Suspense name="root">
3282+
▾ <Suspense name="main">
3283+
<Component>
3284+
[suspense-root] rects={null}
3285+
<Suspense name="root" rects={null}>
3286+
<Suspense name="main" rects={null}>
3287+
`);
3288+
});
3289+
31993290
// @reactVersion >= 19
32003291
it('should keep suspended boundaries in the Suspense tree but not hidden Activity', async () => {
32013292
const Activity = React.Activity || React.unstable_Activity;

0 commit comments

Comments
 (0)