OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 00:20:04 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sebastian "Sebbie" Silbermann 2025-09-15 15:31:58 +02:00 committed by GitHub
parent 47664deb8e
commit 3fa927b674
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 342 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react-devtools-inline/__tests__/__e2e__/components.test.js
View File

@ -93,7 +93,9 @@ test.describe('Components', () => {
const name = isEditable.name
? existingNameElements[0].value
: existingNameElements[0].innerText;
: existingNameElements[0].innerText
// remove trailing colon
.slice(0, -1);
const value = isEditable.value
? existingValueElements[0].value
: existingValueElements[0].innerText;

4
packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js vendored
View File

@ -12,8 +12,8 @@ export function test(maybeStore) {
}
// print() is part of Jest's serializer API
export function print(store, serialize, indent) {
return printStore(store);
export function print(store, serialize, indent, includeSuspense = true) {
return printStore(store, false, null, includeSuspense);
}
// Used for Jest snapshot testing.

93
packages/react-devtools-shared/src/__tests__/profilingCache-test.js vendored
View File

@ -724,34 +724,69 @@ describe('ProfilingCache', () => {
const rootID = store.roots[0];
const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
expect(commitData).toHaveLength(2);
expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
Map {
1 => 15,
2 => 15,
3 => 5,
4 => 2,
}
`);
expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
1 => 0,
2 => 10,
3 => 3,
4 => 2,
}
`);
expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
Map {
5 => 3,
3 => 3,
}
`);
expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
5 => 3,
3 => 0,
}
`);
const isLegacySuspense = React.version.startsWith('17');
if (isLegacySuspense) {
expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
Map {
1 => 15,
2 => 15,
3 => 5,
4 => 3,
5 => 2,
}
`);
expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
1 => 0,
2 => 10,
3 => 3,
4 => 3,
5 => 2,
}
`);
expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
Map {
6 => 3,
3 => 3,
}
`);
expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
6 => 3,
3 => 0,
}
`);
} else {
expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
Map {
1 => 15,
2 => 15,
3 => 5,
4 => 2,
}
`);
expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
1 => 0,
2 => 10,
3 => 3,
4 => 2,
}
`);
expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
Map {
5 => 3,
3 => 3,
}
`);
expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
5 => 3,
3 => 0,
}
`);
}
});
// @reactVersion >= 16.9
@ -866,6 +901,7 @@ describe('ProfilingCache', () => {
"hocDisplayNames": null,
"id": 1,
"key": null,
"stack": null,
"type": 11,
},
],
@ -908,6 +944,7 @@ describe('ProfilingCache', () => {
"hocDisplayNames": null,
"id": 1,
"key": null,
"stack": null,
"type": 11,
},
],

68
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js vendored
View File

@ -15,10 +15,12 @@ import {
} from './utils';
describe('commit tree', () => {
let React;
let React = require('react');
let Scheduler;
let store: Store;
let utils;
const isLegacySuspense =
React.version.startsWith('16') || React.version.startsWith('17');
beforeEach(() => {
utils = require('./utils');
@ -184,17 +186,32 @@ describe('commit tree', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<App renderChildren={true} />));
await Promise.resolve();
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
if (isLegacySuspense) {
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<Lazy>
[suspense-root] rects={null}
<Suspense name="App" rects={null}>
`);
} else {
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
[suspense-root] rects={null}
<Suspense name="App" rects={null}>
`);
}
utils.act(() => legacyRender(<App renderChildren={true} />));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<LazyInnerComponent>
[suspense-root] rects={null}
<Suspense name="App" rects={null}>
`);
utils.act(() => legacyRender(<App renderChildren={false} />));
expect(store).toMatchInlineSnapshot(`
@ -214,7 +231,13 @@ describe('commit tree', () => {
);
}
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
expect(commitTrees[0].nodes.size).toBe(
isLegacySuspense
? // <Root> + <App> + <Suspense> + <Lazy>
4
: // <Root> + <App> + <Suspense>
3,
);
expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
});
@ -268,11 +291,24 @@ describe('commit tree', () => {
it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<App renderChildren={true} />));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
if (isLegacySuspense) {
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<Lazy>
[suspense-root] rects={null}
<Suspense name="App" rects={null}>
`);
} else {
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
[suspense-root] rects={null}
<Suspense name="App" rects={null}>
`);
}
utils.act(() => legacyRender(<App renderChildren={false} />));
expect(store).toMatchInlineSnapshot(`
[root]
@ -291,7 +327,13 @@ describe('commit tree', () => {
);
}
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
expect(commitTrees[0].nodes.size).toBe(
isLegacySuspense
? // <Root> + <App> + <Suspense> + <Lazy>
4
: // <Root> + <App> + <Suspense>
3,
);
expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
});

69
packages/react-devtools-shared/src/__tests__/store-test.js vendored
View File

@ -24,6 +24,35 @@ describe('Store', () => {
let store;
let withErrorsOrWarningsIgnored;
function readValue(promise) {
if (typeof React.use === 'function') {
return React.use(promise);
}
// Support for React < 19.0
switch (promise.status) {
case 'fulfilled':
return promise.value;
case 'rejected':
throw promise.reason;
case 'pending':
throw promise;
default:
promise.status = 'pending';
promise.then(
value => {
promise.status = 'fulfilled';
promise.value = value;
},
reason => {
promise.status = 'rejected';
promise.reason = reason;
},
);
throw promise;
}
}
beforeAll(() => {
// JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
Element.prototype.getClientRects = function (this: Element) {
@ -107,11 +136,7 @@ describe('Store', () => {
let Dynamic = null;
const Owner = () => {
Dynamic = <Child />;
if (React.use) {
React.use(promise);
} else {
throw promise;
}
readValue(promise);
};
const Parent = () => {
return Dynamic;
@ -462,12 +487,9 @@ describe('Store', () => {
// @reactVersion >= 18.0
it('should display Suspense nodes properly in various states', async () => {
const Loading = () => <div>Loading...</div>;
const never = new Promise(() => {});
const SuspendingComponent = () => {
if (React.use) {
React.use(new Promise(() => {}));
} else {
throw new Promise(() => {});
}
readValue(never);
};
const Component = () => {
return <div>Hello</div>;
@ -514,12 +536,9 @@ describe('Store', () => {
it('should support nested Suspense nodes', async () => {
const Component = () => null;
const Loading = () => <div>Loading...</div>;
const never = new Promise(() => {});
const Never = () => {
if (React.use) {
React.use(new Promise(() => {}));
} else {
throw new Promise(() => {});
}
readValue(never);
};
const Wrapper = ({
@ -1019,12 +1038,9 @@ describe('Store', () => {
it('should display a partially rendered SuspenseList', async () => {
const Loading = () => <div>Loading...</div>;
const never = new Promise(() => {});
const SuspendingComponent = () => {
if (React.use) {
React.use(new Promise(() => {}));
} else {
throw new Promise(() => {});
}
readValue(never);
};
const Component = () => {
return <div>Hello</div>;
@ -1379,12 +1395,9 @@ describe('Store', () => {
// @reactVersion >= 18.0
it('should display Suspense nodes properly in various states', async () => {
const Loading = () => <div>Loading...</div>;
const never = new Promise(() => {});
const SuspendingComponent = () => {
if (React.use) {
React.use(new Promise(() => {}));
} else {
throw new Promise(() => {});
}
readValue(never);
};
const Component = () => {
return <div>Hello</div>;
@ -2081,6 +2094,8 @@ describe('Store', () => {
[root]
▾ <App>
<Suspense>
[suspense-root] rects={null}
<Suspense name="App" rects={null}>
`);
// Render again to unmount it before it finishes loading
@ -2826,7 +2841,7 @@ describe('Store', () => {
function Component({children, promise}) {
if (promise) {
React.use(promise);
readValue(promise);
}
return <div>{children}</div>;
}
@ -2901,7 +2916,7 @@ describe('Store', () => {
function Component({children, promise}) {
if (promise) {
React.use(promise);
readValue(promise);
}
return <div>{children}</div>;
}

2
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js vendored
View File

@ -134,7 +134,7 @@ describe('Store component filters', () => {
`);
});
// @reactVersion >= 16.0
// @reactVersion >= 16.6
it('should filter Suspense', async () => {
const Suspense = React.Suspense;
await actAsync(async () =>

228
packages/react-devtools-shared/src/__tests__/storeStressSync-test.js vendored
View File

@ -16,6 +16,35 @@ describe('StoreStress (Legacy Mode)', () => {
let store;
let print;
function readValue(promise) {
if (typeof React.use === 'function') {
return React.use(promise);
}
// Support for React < 19.0
switch (promise.status) {
case 'fulfilled':
return promise.value;
case 'rejected':
throw promise.reason;
case 'pending':
throw promise;
default:
promise.status = 'pending';
promise.then(
value => {
promise.status = 'fulfilled';
promise.value = value;
},
reason => {
promise.status = 'rejected';
promise.reason = reason;
},
);
throw promise;
}
}
beforeEach(() => {
bridge = global.bridge;
store = global.store;
@ -415,118 +444,116 @@ describe('StoreStress (Legacy Mode)', () => {
a,
];
// Excluding Suspense tree here due to different measurement semantics for fallbacks
const stepsSnapshot = [
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<B key="b">
<C key="c">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<B key="b">
<A key="a">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<A key="a">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<A key="a">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<A key="a">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<B key="b">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
<Suspense>
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<B key="b">
<Y>
<Y>"
`,
`
[root]
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>
<Y>"
`,
];
const never = new Promise(() => {});
const Never = () => {
if (React.use) {
React.use(new Promise(() => {}));
} else {
throw new Promise(() => {});
}
readValue(never);
};
const Root = ({children}) => {
@ -549,8 +576,10 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// We snapshot each step once so it doesn't regress.
expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
snapshots.push(print(store));
expect(print(store, undefined, undefined, false)).toMatchInlineSnapshot(
stepsSnapshot[i],
);
snapshots.push(print(store, undefined, undefined, false));
act(() => unmount());
expect(print(store)).toBe('');
}
@ -572,7 +601,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
act(() => unmount());
expect(print(store)).toBe('');
}
@ -592,7 +621,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
render(
@ -604,7 +633,7 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Verify the successful transition to steps[j].
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
render(
@ -615,7 +644,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Clean up after every iteration.
act(() => unmount());
expect(print(store)).toBe('');
@ -641,7 +670,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
render(
@ -657,7 +686,7 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Verify the successful transition to steps[j].
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
render(
@ -672,7 +701,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Clean up after every iteration.
act(() => unmount());
expect(print(store)).toBe('');
@ -694,7 +723,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
render(
@ -710,7 +739,7 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Verify the successful transition to steps[j].
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
render(
@ -721,7 +750,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Clean up after every iteration.
act(() => unmount());
expect(print(store)).toBe('');
@ -747,7 +776,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
render(
@ -759,7 +788,7 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Verify the successful transition to steps[j].
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
render(
@ -774,7 +803,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Clean up after every iteration.
act(() => unmount());
expect(print(store)).toBe('');
@ -803,7 +832,7 @@ describe('StoreStress (Legacy Mode)', () => {
const suspenseID = store.getElementIDAtIndex(2);
// Force fallback.
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
act(() => {
bridge.send('overrideSuspense', {
id: suspenseID,
@ -811,7 +840,7 @@ describe('StoreStress (Legacy Mode)', () => {
forceFallback: true,
});
});
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Stop forcing fallback.
act(() => {
@ -821,7 +850,7 @@ describe('StoreStress (Legacy Mode)', () => {
forceFallback: false,
});
});
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Trigger actual fallback.
act(() =>
@ -837,7 +866,7 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Force fallback while we're in fallback mode.
act(() => {
@ -848,7 +877,7 @@ describe('StoreStress (Legacy Mode)', () => {
});
});
// Keep seeing fallback content.
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Switch to primary mode.
act(() =>
@ -861,7 +890,7 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Fallback is still forced though.
expect(print(store)).toEqual(snapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
// Stop forcing fallback. This reverts to primary content.
act(() => {
@ -872,7 +901,7 @@ describe('StoreStress (Legacy Mode)', () => {
});
});
// Now we see primary content.
expect(print(store)).toEqual(snapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
// Clean up after every iteration.
act(() => unmount());
@ -921,6 +950,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -931,6 +962,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -943,6 +976,8 @@ describe('StoreStress (Legacy Mode)', () => {
<C key="c">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -955,6 +990,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -966,6 +1003,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -977,6 +1016,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -988,6 +1029,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -999,6 +1042,8 @@ describe('StoreStress (Legacy Mode)', () => {
<B key="b">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -1009,6 +1054,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -1018,6 +1065,8 @@ describe('StoreStress (Legacy Mode)', () => {
▾ <MaybeSuspend>
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -1028,6 +1077,8 @@ describe('StoreStress (Legacy Mode)', () => {
<B key="b">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
`
[root]
@ -1038,6 +1089,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<Z>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={[]}>
`,
];
@ -1049,6 +1102,8 @@ describe('StoreStress (Legacy Mode)', () => {
▾ <Suspense>
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1057,6 +1112,8 @@ describe('StoreStress (Legacy Mode)', () => {
▾ <Suspense>
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1067,6 +1124,8 @@ describe('StoreStress (Legacy Mode)', () => {
<B key="b">
<C key="c">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1077,6 +1136,8 @@ describe('StoreStress (Legacy Mode)', () => {
<B key="b">
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1086,6 +1147,8 @@ describe('StoreStress (Legacy Mode)', () => {
<C key="c">
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1095,6 +1158,8 @@ describe('StoreStress (Legacy Mode)', () => {
<C key="c">
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1104,6 +1169,8 @@ describe('StoreStress (Legacy Mode)', () => {
<C key="c">
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1113,6 +1180,8 @@ describe('StoreStress (Legacy Mode)', () => {
<A key="a">
<B key="b">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1121,6 +1190,8 @@ describe('StoreStress (Legacy Mode)', () => {
▾ <Suspense>
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1128,6 +1199,8 @@ describe('StoreStress (Legacy Mode)', () => {
<X>
<Suspense>
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1136,6 +1209,8 @@ describe('StoreStress (Legacy Mode)', () => {
▾ <Suspense>
<B key="b">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
`
[root]
@ -1144,15 +1219,14 @@ describe('StoreStress (Legacy Mode)', () => {
▾ <Suspense>
<A key="a">
<Y>
[suspense-root] rects={[]}
<Suspense name="Unknown" rects={null}>
`,
];
const never = new Promise(() => {});
const Never = () => {
if (React.use) {
React.use(new Promise(() => {}));
} else {
throw new Promise(() => {});
}
readValue(never);
};
const MaybeSuspend = ({children, suspend}) => {
@ -1224,7 +1298,7 @@ describe('StoreStress (Legacy Mode)', () => {
);
// We snapshot each step once so it doesn't regress.
expect(store).toMatchInlineSnapshot(stepsSnapshotTwo[i]);
fallbackSnapshots.push(print(store));
fallbackSnapshots.push(print(store, undefined, undefined, false));
act(() => unmount());
expect(print(store)).toBe('');
}
@ -1302,7 +1376,9 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(fallbackSnapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[i],
);
// Re-render with steps[j].
act(() =>
render(
@ -1321,7 +1397,9 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Verify the successful transition to steps[j].
expect(print(store)).toEqual(fallbackSnapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[j],
);
// Check that we can transition back again.
act(() =>
render(
@ -1339,7 +1417,9 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(fallbackSnapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[i],
);
// Clean up after every iteration.
act(() => unmount());
expect(print(store)).toBe('');
@ -1377,7 +1457,9 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Verify the successful transition to steps[j].
expect(print(store)).toEqual(fallbackSnapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[j],
);
// Check that we can transition back again.
act(() =>
render(
@ -1414,7 +1496,9 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(fallbackSnapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[i],
);
// Re-render with steps[j].
act(() =>
render(
@ -1441,7 +1525,9 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(fallbackSnapshots[i]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[i],
);
// Clean up after every iteration.
act(() => unmount());
expect(print(store)).toBe('');
@ -1480,7 +1566,9 @@ describe('StoreStress (Legacy Mode)', () => {
forceFallback: true,
});
});
expect(print(store)).toEqual(fallbackSnapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[j],
);
// Stop forcing fallback.
act(() => {
@ -1504,7 +1592,9 @@ describe('StoreStress (Legacy Mode)', () => {
</Root>,
),
);
expect(print(store)).toEqual(fallbackSnapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[j],
);
// Force fallback while we're in fallback mode.
act(() => {
@ -1515,7 +1605,9 @@ describe('StoreStress (Legacy Mode)', () => {
});
});
// Keep seeing fallback content.
expect(print(store)).toEqual(fallbackSnapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[j],
);
// Switch to primary mode.
act(() =>
@ -1530,7 +1622,9 @@ describe('StoreStress (Legacy Mode)', () => {
),
);
// Fallback is still forced though.
expect(print(store)).toEqual(fallbackSnapshots[j]);
expect(print(store, undefined, undefined, false)).toEqual(
fallbackSnapshots[j],
);
// Stop forcing fallback. This reverts to primary content.
act(() => {

19
scripts/jest/preprocessor.js
View File

@ -80,7 +80,19 @@ module.exports = {
// This is only for React DevTools tests with React 16.x
// `react/jsx-dev-runtime` and `react/jsx-runtime` are included in the package starting from v17
if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
// Technically 16.14 and 15.7 have the new runtime but we're not testing those versions.
if (
semver.gte(ReactVersionTestingAgainst, '15.0.0') &&
semver.lt(ReactVersionTestingAgainst, '17.0.0')
) {
plugins.push(
[
require.resolve('@babel/plugin-transform-react-jsx'),
{runtime: 'classic'},
],
require.resolve('@babel/plugin-transform-react-jsx-source')
);
} else {
plugins.push([
process.env.NODE_ENV === 'development'
? require.resolve('@babel/plugin-transform-react-jsx-development')
@ -89,11 +101,6 @@ module.exports = {
// would be React.createElement.
{runtime: 'automatic'},
]);
} else {
plugins.push(
require.resolve('@babel/plugin-transform-react-jsx'),
require.resolve('@babel/plugin-transform-react-jsx-source')
);
}
plugins.push(pathToTransformLazyJSXImport);