Skip to content

Commit b321624

Browse files
hoxyqhoxyq
committed
chore: use versioned render in profilingCache test
1 parent e51cda5 commit b321624

File tree

1 file changed

+140
-50
lines changed

1 file changed

+140
-50
lines changed

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

+140-50
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
1111
import type Store from 'react-devtools-shared/src/devtools/store';
1212

13+
import {getVersionedRenderImplementation} from './utils';
14+
1315
describe('ProfilingCache', () => {
1416
let PropTypes;
1517
let React;
@@ -39,8 +41,11 @@ describe('ProfilingCache', () => {
3941
Scheduler = require('scheduler');
4042
});
4143

44+
const {render, getContainer} = getVersionedRenderImplementation();
45+
4246
// @reactVersion >= 16.9
43-
it('should collect data for each root (including ones added or mounted after profiling started)', () => {
47+
// @reactVersion < 19
48+
it('should collect data for each root (including ones added or mounted after profiling started) (legacy render)', () => {
4449
const Parent = ({count}) => {
4550
Scheduler.unstable_advanceTime(10);
4651
const children = new Array(count)
@@ -151,6 +156,116 @@ describe('ProfilingCache', () => {
151156
});
152157
});
153158

159+
// @reactVersion >= 18
160+
it('should collect data for each root (including ones added or mounted after profiling started) (createRoot)', () => {
161+
const Parent = ({count}) => {
162+
Scheduler.unstable_advanceTime(10);
163+
const children = new Array(count)
164+
.fill(true)
165+
.map((_, index) => <Child key={index} duration={index} />);
166+
return (
167+
<React.Fragment>
168+
{children}
169+
<MemoizedChild duration={1} />
170+
</React.Fragment>
171+
);
172+
};
173+
const Child = ({duration}) => {
174+
Scheduler.unstable_advanceTime(duration);
175+
return null;
176+
};
177+
const MemoizedChild = React.memo(Child);
178+
179+
const RootA = ({children}) => children;
180+
const RootB = ({children}) => children;
181+
const RootC = ({children}) => children;
182+
183+
const containerA = document.createElement('div');
184+
const containerB = document.createElement('div');
185+
const containerC = document.createElement('div');
186+
187+
const rootA = ReactDOMClient.createRoot(containerA);
188+
const rootB = ReactDOMClient.createRoot(containerB);
189+
const rootC = ReactDOMClient.createRoot(containerC);
190+
191+
utils.act(() =>
192+
rootA.render(
193+
<RootA>
194+
<Parent count={2} />
195+
</RootA>,
196+
),
197+
);
198+
utils.act(() =>
199+
rootB.render(
200+
<RootB>
201+
<Parent count={1} />
202+
</RootB>,
203+
),
204+
);
205+
utils.act(() => store.profilerStore.startProfiling());
206+
utils.act(() =>
207+
rootA.render(
208+
<RootA>
209+
<Parent count={3} />
210+
</RootA>,
211+
),
212+
);
213+
utils.act(() =>
214+
rootC.render(
215+
<RootC>
216+
<Parent count={1} />
217+
</RootC>,
218+
),
219+
);
220+
utils.act(() =>
221+
rootA.render(
222+
<RootA>
223+
<Parent count={1} />
224+
</RootA>,
225+
),
226+
);
227+
utils.act(() => rootB.unmount());
228+
utils.act(() =>
229+
rootA.render(
230+
<RootA>
231+
<Parent count={0} />
232+
</RootA>,
233+
),
234+
);
235+
utils.act(() => store.profilerStore.stopProfiling());
236+
utils.act(() => rootA.unmount());
237+
238+
const rootIDs = Array.from(
239+
store.profilerStore.profilingData.dataForRoots.values(),
240+
).map(({rootID}) => rootID);
241+
expect(rootIDs).toHaveLength(3);
242+
243+
const originalProfilingDataForRoot = [];
244+
245+
let data = store.profilerStore.getDataForRoot(rootIDs[0]);
246+
expect(data.displayName).toMatchInlineSnapshot(`"RootA"`);
247+
expect(data.commitData).toHaveLength(3);
248+
originalProfilingDataForRoot.push(data);
249+
250+
data = store.profilerStore.getDataForRoot(rootIDs[1]);
251+
expect(data.displayName).toMatchInlineSnapshot(`"RootC"`);
252+
expect(data.commitData).toHaveLength(1);
253+
originalProfilingDataForRoot.push(data);
254+
255+
data = store.profilerStore.getDataForRoot(rootIDs[2]);
256+
expect(data.displayName).toMatchInlineSnapshot(`"RootB"`);
257+
expect(data.commitData).toHaveLength(1);
258+
originalProfilingDataForRoot.push(data);
259+
260+
utils.exportImportHelper(bridge, store);
261+
262+
rootIDs.forEach((rootID, index) => {
263+
const current = store.profilerStore.getDataForRoot(rootID);
264+
const prev = originalProfilingDataForRoot[index];
265+
expect(current).toEqual(prev);
266+
});
267+
});
268+
154269
// @reactVersion >= 16.9
155270
it('should collect data for each commit', () => {
156271
const Parent = ({count}) => {
@@ -171,13 +286,11 @@ describe('ProfilingCache', () => {
171286
};
172287
const MemoizedChild = React.memo(Child);
173288

174-
const container = document.createElement('div');
175-
176289
utils.act(() => store.profilerStore.startProfiling());
177-
utils.act(() => legacyRender(<Parent count={2} />, container));
178-
utils.act(() => legacyRender(<Parent count={3} />, container));
179-
utils.act(() => legacyRender(<Parent count={1} />, container));
180-
utils.act(() => legacyRender(<Parent count={0} />, container));
290+
utils.act(() => render(<Parent count={2} />));
291+
utils.act(() => render(<Parent count={3} />));
292+
utils.act(() => render(<Parent count={1} />));
293+
utils.act(() => render(<Parent count={0} />));
181294
utils.act(() => store.profilerStore.stopProfiling());
182295

183296
const rootID = store.roots[0];
@@ -244,19 +357,13 @@ describe('ProfilingCache', () => {
244357
}
245358
}
246359

247-
const container = document.createElement('div');
248-
249360
utils.act(() => store.profilerStore.startProfiling());
250-
utils.act(() => legacyRender(<LegacyContextProvider />, container));
361+
utils.act(() => render(<LegacyContextProvider />));
251362
expect(instance).not.toBeNull();
252363
utils.act(() => (instance: any).setState({count: 1}));
253-
utils.act(() =>
254-
legacyRender(<LegacyContextProvider foo={123} />, container),
255-
);
256-
utils.act(() =>
257-
legacyRender(<LegacyContextProvider bar="abc" />, container),
258-
);
259-
utils.act(() => legacyRender(<LegacyContextProvider />, container));
364+
utils.act(() => render(<LegacyContextProvider foo={123} />));
365+
utils.act(() => render(<LegacyContextProvider bar="abc" />));
366+
utils.act(() => render(<LegacyContextProvider />));
260367
utils.act(() => store.profilerStore.stopProfiling());
261368

262369
const rootID = store.roots[0];
@@ -574,25 +681,21 @@ describe('ProfilingCache', () => {
574681
return null;
575682
};
576683

577-
const container = document.createElement('div');
578-
579684
utils.act(() => store.profilerStore.startProfiling());
580685
utils.act(() =>
581-
legacyRender(
686+
render(
582687
<Context.Provider value={true}>
583688
<Component count={1} />
584689
</Context.Provider>,
585-
container,
586690
),
587691
);
588692

589693
// Second render has no changed hooks, only changed props.
590694
utils.act(() =>
591-
legacyRender(
695+
render(
592696
<Context.Provider value={true}>
593697
<Component count={2} />
594698
</Context.Provider>,
595-
container,
596699
),
597700
);
598701

@@ -604,11 +707,10 @@ describe('ProfilingCache', () => {
604707

605708
// Fifth render has a changed context value, but no changed hook.
606709
utils.act(() =>
607-
legacyRender(
710+
render(
608711
<Context.Provider value={false}>
609712
<Component count={2} />
610713
</Context.Provider>,
611-
container,
612714
),
613715
);
614716

@@ -754,9 +856,7 @@ describe('ProfilingCache', () => {
754856
};
755857

756858
utils.act(() => store.profilerStore.startProfiling());
757-
utils.act(() =>
758-
legacyRender(<Grandparent />, document.createElement('div')),
759-
);
859+
utils.act(() => render(<Grandparent />));
760860
utils.act(() => store.profilerStore.stopProfiling());
761861

762862
expect(store).toMatchInlineSnapshot(`
@@ -822,9 +922,7 @@ describe('ProfilingCache', () => {
822922
};
823923

824924
utils.act(() => store.profilerStore.startProfiling());
825-
await utils.actAsync(() =>
826-
legacyRender(<Parent />, document.createElement('div')),
827-
);
925+
await utils.actAsync(() => render(<Parent />));
828926
utils.act(() => store.profilerStore.stopProfiling());
829927

830928
const rootID = store.roots[0];
@@ -880,12 +978,10 @@ describe('ProfilingCache', () => {
880978
};
881979
const MemoizedChild = React.memo(Child);
882980

883-
const container = document.createElement('div');
884-
885981
utils.act(() => store.profilerStore.startProfiling());
886-
utils.act(() => legacyRender(<Parent count={1} />, container));
887-
utils.act(() => legacyRender(<Parent count={2} />, container));
888-
utils.act(() => legacyRender(<Parent count={3} />, container));
982+
utils.act(() => render(<Parent count={1} />));
983+
utils.act(() => render(<Parent count={2} />));
984+
utils.act(() => render(<Parent count={3} />));
889985
utils.act(() => store.profilerStore.stopProfiling());
890986

891987
const rootID = store.roots[0];
@@ -941,10 +1037,8 @@ describe('ProfilingCache', () => {
9411037
// @reactVersion >= 18.0.0
9421038
// @reactVersion <= 18.2.0
9431039
it('should handle unexpectedly shallow suspense trees for react v[18.0.0 - 18.2.0]', () => {
944-
const container = document.createElement('div');
945-
9461040
utils.act(() => store.profilerStore.startProfiling());
947-
utils.act(() => legacyRender(<React.Suspense />, container));
1041+
utils.act(() => render(<React.Suspense />));
9481042
utils.act(() => store.profilerStore.stopProfiling());
9491043

9501044
const rootID = store.roots[0];
@@ -969,7 +1063,7 @@ describe('ProfilingCache', () => {
9691063
"updaters": [
9701064
{
9711065
"compiledWithForget": false,
972-
"displayName": "render()",
1066+
"displayName": "createRoot()",
9731067
"hocDisplayNames": null,
9741068
"id": 1,
9751069
"key": null,
@@ -981,13 +1075,10 @@ describe('ProfilingCache', () => {
9811075
`);
9821076
});
9831077

984-
// This test is not gated.
985-
// For this test we use the current version of react, built from source.
1078+
// @reactVersion > 18.2.0
9861079
it('should handle unexpectedly shallow suspense trees', () => {
987-
const container = document.createElement('div');
988-
9891080
utils.act(() => store.profilerStore.startProfiling());
990-
utils.act(() => legacyRender(<React.Suspense />, container));
1081+
utils.act(() => render(<React.Suspense />));
9911082
utils.act(() => store.profilerStore.stopProfiling());
9921083

9931084
const rootID = store.roots[0];
@@ -1012,7 +1103,7 @@ describe('ProfilingCache', () => {
10121103
"updaters": [
10131104
{
10141105
"compiledWithForget": false,
1015-
"displayName": "render()",
1106+
"displayName": "createRoot()",
10161107
"hocDisplayNames": null,
10171108
"id": 1,
10181109
"key": null,
@@ -1105,13 +1196,12 @@ describe('ProfilingCache', () => {
11051196

11061197
const {Simulate} = require('react-dom/test-utils');
11071198

1108-
const container = document.createElement('div');
1109-
utils.act(() => legacyRender(<App />, container));
1110-
expect(container.textContent).toBe('Home');
1199+
utils.act(() => render(<App />));
1200+
expect(getContainer().textContent).toBe('Home');
11111201
utils.act(() => store.profilerStore.startProfiling());
11121202
utils.act(() => Simulate.click(linkRef.current));
11131203
utils.act(() => store.profilerStore.stopProfiling());
1114-
expect(container.textContent).toBe('About');
1204+
expect(getContainer().textContent).toBe('About');
11151205
});
11161206

11171207
// @reactVersion >= 18.0

0 commit comments

Comments
 (0)