Skip to content

Commit f86aa5c

Browse files
hoxyqhoxyq
committed
chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering
1 parent 86b95ed commit f86aa5c

File tree

2 files changed

+87
-33
lines changed

2 files changed

+87
-33
lines changed

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

+84-31
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,35 @@
99

1010
import type Store from 'react-devtools-shared/src/devtools/store';
1111

12+
import {
13+
getLegacyRenderImplementation,
14+
getModernRenderImplementation,
15+
} from './utils';
16+
1217
describe('commit tree', () => {
1318
let React;
14-
let ReactDOMClient;
1519
let Scheduler;
16-
let legacyRender;
1720
let store: Store;
1821
let utils;
1922

2023
beforeEach(() => {
2124
utils = require('./utils');
2225
utils.beforeEachProfiling();
2326

24-
legacyRender = utils.legacyRender;
25-
2627
store = global.store;
2728
store.collapseNodesByDefault = false;
2829
store.recordChangeDescriptions = true;
2930

3031
React = require('react');
31-
ReactDOMClient = require('react-dom/client');
3232
Scheduler = require('scheduler');
3333
});
3434

35+
const {render: legacyRender} = getLegacyRenderImplementation();
36+
const {render: modernRender} = getModernRenderImplementation();
37+
3538
// @reactVersion >= 16.9
36-
it('should be able to rebuild the store tree for each commit', () => {
39+
// @reactVersion <= 18.2
40+
it('should be able to rebuild the store tree for each commit (legacy render)', () => {
3741
const Parent = ({count}) => {
3842
Scheduler.unstable_advanceTime(10);
3943
return new Array(count)
@@ -45,31 +49,88 @@ describe('commit tree', () => {
4549
return null;
4650
});
4751

48-
const container = document.createElement('div');
52+
utils.act(() => store.profilerStore.startProfiling());
53+
utils.act(() => legacyRender(<Parent count={1} />));
54+
expect(store).toMatchInlineSnapshot(`
55+
[root]
56+
▾ <Parent>
57+
<Child key="0"> [Memo]
58+
`);
59+
utils.act(() => legacyRender(<Parent count={3} />));
60+
expect(store).toMatchInlineSnapshot(`
61+
[root]
62+
▾ <Parent>
63+
<Child key="0"> [Memo]
64+
<Child key="1"> [Memo]
65+
<Child key="2"> [Memo]
66+
`);
67+
utils.act(() => legacyRender(<Parent count={2} />));
68+
expect(store).toMatchInlineSnapshot(`
69+
[root]
70+
▾ <Parent>
71+
<Child key="0"> [Memo]
72+
<Child key="1"> [Memo]
73+
`);
74+
utils.act(() => legacyRender(<Parent count={0} />));
75+
expect(store).toMatchInlineSnapshot(`
76+
[root]
77+
<Parent>
78+
`);
79+
utils.act(() => store.profilerStore.stopProfiling());
80+
81+
const rootID = store.roots[0];
82+
const commitTrees = [];
83+
for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
84+
commitTrees.push(
85+
store.profilerStore.profilingCache.getCommitTree({
86+
commitIndex,
87+
rootID,
88+
}),
89+
);
90+
}
91+
92+
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <Parent> + <Child>
93+
expect(commitTrees[1].nodes.size).toBe(5); // <Root> + <Parent> + <Child> x 3
94+
expect(commitTrees[2].nodes.size).toBe(4); // <Root> + <Parent> + <Child> x 2
95+
expect(commitTrees[3].nodes.size).toBe(2); // <Root> + <Parent>
96+
});
97+
98+
// @reactVersion >= 18
99+
it('should be able to rebuild the store tree for each commit (createRoot)', () => {
100+
const Parent = ({count}) => {
101+
Scheduler.unstable_advanceTime(10);
102+
return new Array(count)
103+
.fill(true)
104+
.map((_, index) => <Child key={index} />);
105+
};
106+
const Child = React.memo(function Child() {
107+
Scheduler.unstable_advanceTime(2);
108+
return null;
109+
});
49110

50111
utils.act(() => store.profilerStore.startProfiling());
51-
utils.act(() => legacyRender(<Parent count={1} />, container));
112+
utils.act(() => modernRender(<Parent count={1} />));
52113
expect(store).toMatchInlineSnapshot(`
53114
[root]
54115
▾ <Parent>
55116
<Child key="0"> [Memo]
56117
`);
57-
utils.act(() => legacyRender(<Parent count={3} />, container));
118+
utils.act(() => modernRender(<Parent count={3} />));
58119
expect(store).toMatchInlineSnapshot(`
59120
[root]
60121
▾ <Parent>
61122
<Child key="0"> [Memo]
62123
<Child key="1"> [Memo]
63124
<Child key="2"> [Memo]
64125
`);
65-
utils.act(() => legacyRender(<Parent count={2} />, container));
126+
utils.act(() => modernRender(<Parent count={2} />));
66127
expect(store).toMatchInlineSnapshot(`
67128
[root]
68129
▾ <Parent>
69130
<Child key="0"> [Memo]
70131
<Child key="1"> [Memo]
71132
`);
72-
utils.act(() => legacyRender(<Parent count={0} />, container));
133+
utils.act(() => modernRender(<Parent count={0} />));
73134
expect(store).toMatchInlineSnapshot(`
74135
[root]
75136
<Parent>
@@ -118,25 +179,24 @@ describe('commit tree', () => {
118179
});
119180

120181
// @reactVersion >= 16.9
182+
// @reactVersion <= 18.2
121183
it('should support Lazy components (legacy render)', async () => {
122-
const container = document.createElement('div');
123-
124184
utils.act(() => store.profilerStore.startProfiling());
125-
utils.act(() => legacyRender(<App renderChildren={true} />, container));
185+
utils.act(() => legacyRender(<App renderChildren={true} />));
126186
await Promise.resolve();
127187
expect(store).toMatchInlineSnapshot(`
128188
[root]
129189
▾ <App>
130190
<Suspense>
131191
`);
132-
utils.act(() => legacyRender(<App renderChildren={true} />, container));
192+
utils.act(() => legacyRender(<App renderChildren={true} />));
133193
expect(store).toMatchInlineSnapshot(`
134194
[root]
135195
▾ <App>
136196
▾ <Suspense>
137197
<LazyInnerComponent>
138198
`);
139-
utils.act(() => legacyRender(<App renderChildren={false} />, container));
199+
utils.act(() => legacyRender(<App renderChildren={false} />));
140200
expect(store).toMatchInlineSnapshot(`
141201
[root]
142202
<App>
@@ -161,25 +221,22 @@ describe('commit tree', () => {
161221

162222
// @reactVersion >= 18.0
163223
it('should support Lazy components (createRoot)', async () => {
164-
const container = document.createElement('div');
165-
const root = ReactDOMClient.createRoot(container);
166-
167224
utils.act(() => store.profilerStore.startProfiling());
168-
utils.act(() => root.render(<App renderChildren={true} />));
225+
utils.act(() => modernRender(<App renderChildren={true} />));
169226
await Promise.resolve();
170227
expect(store).toMatchInlineSnapshot(`
171228
[root]
172229
▾ <App>
173230
<Suspense>
174231
`);
175-
utils.act(() => root.render(<App renderChildren={true} />));
232+
utils.act(() => modernRender(<App renderChildren={true} />));
176233
expect(store).toMatchInlineSnapshot(`
177234
[root]
178235
▾ <App>
179236
▾ <Suspense>
180237
<LazyInnerComponent>
181238
`);
182-
utils.act(() => root.render(<App renderChildren={false} />));
239+
utils.act(() => modernRender(<App renderChildren={false} />));
183240
expect(store).toMatchInlineSnapshot(`
184241
[root]
185242
<App>
@@ -203,17 +260,16 @@ describe('commit tree', () => {
203260
});
204261

205262
// @reactVersion >= 16.9
263+
// @reactVersion <= 18.2
206264
it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
207-
const container = document.createElement('div');
208-
209265
utils.act(() => store.profilerStore.startProfiling());
210-
utils.act(() => legacyRender(<App renderChildren={true} />, container));
266+
utils.act(() => legacyRender(<App renderChildren={true} />));
211267
expect(store).toMatchInlineSnapshot(`
212268
[root]
213269
▾ <App>
214270
<Suspense>
215271
`);
216-
utils.act(() => legacyRender(<App renderChildren={false} />, container));
272+
utils.act(() => legacyRender(<App renderChildren={false} />));
217273
expect(store).toMatchInlineSnapshot(`
218274
[root]
219275
<App>
@@ -237,17 +293,14 @@ describe('commit tree', () => {
237293

238294
// @reactVersion >= 18.0
239295
it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
240-
const container = document.createElement('div');
241-
const root = ReactDOMClient.createRoot(container);
242-
243296
utils.act(() => store.profilerStore.startProfiling());
244-
utils.act(() => root.render(<App renderChildren={true} />));
297+
utils.act(() => modernRender(<App renderChildren={true} />));
245298
expect(store).toMatchInlineSnapshot(`
246299
[root]
247300
▾ <App>
248301
<Suspense>
249302
`);
250-
utils.act(() => root.render(<App renderChildren={false} />));
303+
utils.act(() => modernRender(<App renderChildren={false} />));
251304
expect(store).toMatchInlineSnapshot(`
252305
[root]
253306
<App>

‎packages/react-devtools-shared/src/__tests__/utils.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,9 @@ export function getModernRenderImplementation(): RenderImplementation {
182182
});
183183

184184
function render(elements) {
185+
if (root == null) {
186+
root = ReactDOMClient.createRoot(container);
187+
}
185188
root.render(elements);
186189

187190
return unmount;
@@ -195,8 +198,6 @@ export function getModernRenderImplementation(): RenderImplementation {
195198
container = document.createElement('div');
196199
document.body.appendChild(container);
197200

198-
root = ReactDOMClient.createRoot(container);
199-
200201
containersToRemove.push(container);
201202
}
202203

0 commit comments

Comments
 (0)