Skip to content

Commit 8b5f0c4

Browse files
hoxyqhoxyq
authored
chore: use versioned render in preprocessData test and gate some for … (#28219)
1 parent 97fd3e7 commit 8b5f0c4

File tree

1 file changed

+67
-44
lines changed

1 file changed

+67
-44
lines changed

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

Lines changed: 67 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@
99

1010
'use strict';
1111

12-
import {normalizeCodeLocInfo} from './utils';
12+
import semver from 'semver';
13+
14+
import {getLegacyRenderImplementation, normalizeCodeLocInfo} from './utils';
15+
import {ReactVersion} from '../../../../ReactVersions';
16+
17+
const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
1318

1419
describe('Timeline profiler', () => {
1520
let React;
@@ -76,6 +81,13 @@ describe('Timeline profiler', () => {
7681
}
7782

7883
beforeEach(() => {
84+
// Mock react/jsx-dev-runtime for React 16.x
85+
// Although there are no tests in this suite which will run for React 16,
86+
// Jest will report an error trying to resolve this dependency
87+
if (semver.lt(ReactVersionTestingAgainst, '17.0.0')) {
88+
jest.mock('react/jsx-dev-runtime', () => {});
89+
}
90+
7991
utils = require('./utils');
8092
utils.beforeEachProfiling();
8193

@@ -107,6 +119,8 @@ describe('Timeline profiler', () => {
107119
setPerformanceMock(null);
108120
});
109121

122+
const {render: legacyRender} = getLegacyRenderImplementation();
123+
110124
describe('getLanesFromTransportDecimalBitmask', () => {
111125
let getLanesFromTransportDecimalBitmask;
112126

@@ -614,8 +628,10 @@ describe('Timeline profiler', () => {
614628
`);
615629
});
616630

631+
// @reactVersion <= 18.2
632+
// @reactVersion >= 18.0
617633
it('should process a sample legacy render sequence', async () => {
618-
utils.legacyRender(<div />, document.createElement('div'));
634+
legacyRender(<div />);
619635

620636
const data = await preprocessData([
621637
...createBoilerplateEntries(),
@@ -629,31 +645,31 @@ describe('Timeline profiler', () => {
629645
"batchUID": 0,
630646
"depth": 0,
631647
"duration": 0.01,
632-
"lanes": "0b0000000000000000000000000000001",
648+
"lanes": "0b0000000000000000000000000000000",
633649
"timestamp": 0.006,
634650
"type": "render-idle",
635651
},
636652
{
637653
"batchUID": 0,
638654
"depth": 0,
639655
"duration": 0.001,
640-
"lanes": "0b0000000000000000000000000000001",
656+
"lanes": "0b0000000000000000000000000000000",
641657
"timestamp": 0.006,
642658
"type": "render",
643659
},
644660
{
645661
"batchUID": 0,
646662
"depth": 0,
647663
"duration": 0.008,
648-
"lanes": "0b0000000000000000000000000000001",
664+
"lanes": "0b0000000000000000000000000000000",
649665
"timestamp": 0.008,
650666
"type": "commit",
651667
},
652668
{
653669
"batchUID": 0,
654670
"depth": 1,
655671
"duration": 0.001,
656-
"lanes": "0b0000000000000000000000000000001",
672+
"lanes": "0b0000000000000000000000000000000",
657673
"timestamp": 0.014,
658674
"type": "layout-effects",
659675
},
@@ -714,41 +730,41 @@ describe('Timeline profiler', () => {
714730
30 => "Offscreen",
715731
},
716732
"laneToReactMeasureMap": Map {
717-
0 => [],
718-
1 => [
733+
0 => [
719734
{
720735
"batchUID": 0,
721736
"depth": 0,
722737
"duration": 0.01,
723-
"lanes": "0b0000000000000000000000000000001",
738+
"lanes": "0b0000000000000000000000000000000",
724739
"timestamp": 0.006,
725740
"type": "render-idle",
726741
},
727742
{
728743
"batchUID": 0,
729744
"depth": 0,
730745
"duration": 0.001,
731-
"lanes": "0b0000000000000000000000000000001",
746+
"lanes": "0b0000000000000000000000000000000",
732747
"timestamp": 0.006,
733748
"type": "render",
734749
},
735750
{
736751
"batchUID": 0,
737752
"depth": 0,
738753
"duration": 0.008,
739-
"lanes": "0b0000000000000000000000000000001",
754+
"lanes": "0b0000000000000000000000000000000",
740755
"timestamp": 0.008,
741756
"type": "commit",
742757
},
743758
{
744759
"batchUID": 0,
745760
"depth": 1,
746761
"duration": 0.001,
747-
"lanes": "0b0000000000000000000000000000001",
762+
"lanes": "0b0000000000000000000000000000000",
748763
"timestamp": 0.014,
749764
"type": "layout-effects",
750765
},
751766
],
767+
1 => [],
752768
2 => [],
753769
3 => [],
754770
4 => [],
@@ -785,7 +801,7 @@ describe('Timeline profiler', () => {
785801
"reactVersion": "<filtered-version>",
786802
"schedulingEvents": [
787803
{
788-
"lanes": "0b0000000000000000000000000000001",
804+
"lanes": "0b0000000000000000000000000000000",
789805
"timestamp": 0.005,
790806
"type": "schedule-render",
791807
"warning": null,
@@ -1132,9 +1148,9 @@ describe('Timeline profiler', () => {
11321148
});
11331149

11341150
// @reactVersion >= 18.0
1151+
// @reactVersion <= 18.2
11351152
it('should error if events and measures are incomplete', async () => {
1136-
const container = document.createElement('div');
1137-
utils.legacyRender(<div />, container);
1153+
legacyRender(<div />);
11381154

11391155
const invalidMarks = clearedMarks.filter(
11401156
mark => !mark.includes('render-stop'),
@@ -1150,9 +1166,9 @@ describe('Timeline profiler', () => {
11501166
});
11511167

11521168
// @reactVersion >= 18.0
1169+
// @reactVersion <= 18.2
11531170
it('should error if work is completed without being started', async () => {
1154-
const container = document.createElement('div');
1155-
utils.legacyRender(<div />, container);
1171+
legacyRender(<div />);
11561172

11571173
const invalidMarks = clearedMarks.filter(
11581174
mark => !mark.includes('render-start'),
@@ -1262,6 +1278,7 @@ describe('Timeline profiler', () => {
12621278
describe('warnings', () => {
12631279
describe('long event handlers', () => {
12641280
// @reactVersion >= 18.0
1281+
// @reactVersion <= 18.2
12651282
it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
12661283
function App() {
12671284
return null;
@@ -1275,7 +1292,7 @@ describe('Timeline profiler', () => {
12751292

12761293
clearPendingMarks();
12771294

1278-
utils.legacyRender(<App />, document.createElement('div'));
1295+
legacyRender(<App />);
12791296

12801297
testMarks.push(...createUserTimingData(clearedMarks));
12811298

@@ -1285,6 +1302,7 @@ describe('Timeline profiler', () => {
12851302
});
12861303

12871304
// @reactVersion >= 18.0
1305+
// @reactVersion <= 18.2
12881306
it('should not warn about long events if the cause was non-React JavaScript', async () => {
12891307
function App() {
12901308
return null;
@@ -1300,7 +1318,7 @@ describe('Timeline profiler', () => {
13001318

13011319
clearPendingMarks();
13021320

1303-
utils.legacyRender(<App />, document.createElement('div'));
1321+
legacyRender(<App />);
13041322

13051323
testMarks.push(...createUserTimingData(clearedMarks));
13061324

@@ -1310,6 +1328,7 @@ describe('Timeline profiler', () => {
13101328
});
13111329

13121330
// @reactVersion >= 18.0
1331+
// @reactVersion <= 18.2
13131332
it('should warn when React scedules a long (sync) update inside of an event', async () => {
13141333
function App() {
13151334
return null;
@@ -1323,7 +1342,7 @@ describe('Timeline profiler', () => {
13231342

13241343
clearPendingMarks();
13251344

1326-
utils.legacyRender(<App />, document.createElement('div'));
1345+
legacyRender(<App />);
13271346

13281347
clearedMarks.forEach(markName => {
13291348
if (markName === '--render-stop') {
@@ -1929,8 +1948,12 @@ describe('Timeline profiler', () => {
19291948
global.IS_REACT_ACT_ENVIRONMENT = true;
19301949
});
19311950

1951+
const {render: legacyRender} = getLegacyRenderImplementation();
1952+
1953+
// @reactVersion <= 18.2
1954+
// @reactVersion >= 18.0
19321955
it('should process a sample legacy render sequence', async () => {
1933-
utils.legacyRender(<div />, document.createElement('div'));
1956+
legacyRender(<div />);
19341957
utils.act(() => store.profilerStore.stopProfiling());
19351958

19361959
const data = store.profilerStore.profilingData?.timelineData;
@@ -1944,31 +1967,31 @@ describe('Timeline profiler', () => {
19441967
"batchUID": 1,
19451968
"depth": 0,
19461969
"duration": 0,
1947-
"lanes": "0b0000000000000000000000000000010",
1970+
"lanes": "0b0000000000000000000000000000001",
19481971
"timestamp": 10,
19491972
"type": "render-idle",
19501973
},
19511974
{
19521975
"batchUID": 1,
19531976
"depth": 0,
19541977
"duration": 0,
1955-
"lanes": "0b0000000000000000000000000000010",
1978+
"lanes": "0b0000000000000000000000000000001",
19561979
"timestamp": 10,
19571980
"type": "render",
19581981
},
19591982
{
19601983
"batchUID": 1,
19611984
"depth": 0,
19621985
"duration": 0,
1963-
"lanes": "0b0000000000000000000000000000010",
1986+
"lanes": "0b0000000000000000000000000000001",
19641987
"timestamp": 10,
19651988
"type": "commit",
19661989
},
19671990
{
19681991
"batchUID": 1,
19691992
"depth": 1,
19701993
"duration": 0,
1971-
"lanes": "0b0000000000000000000000000000010",
1994+
"lanes": "0b0000000000000000000000000000001",
19721995
"timestamp": 10,
19731996
"type": "layout-effects",
19741997
},
@@ -1979,13 +2002,13 @@ describe('Timeline profiler', () => {
19792002
"flamechart": [],
19802003
"internalModuleSourceToRanges": Map {},
19812004
"laneToLabelMap": Map {
1982-
1 => "SyncHydrationLane",
1983-
2 => "Sync",
1984-
4 => "InputContinuousHydration",
1985-
8 => "InputContinuous",
1986-
16 => "DefaultHydration",
1987-
32 => "Default",
1988-
64 => "TransitionHydration",
2005+
1 => "Sync",
2006+
2 => "InputContinuousHydration",
2007+
4 => "InputContinuous",
2008+
8 => "DefaultHydration",
2009+
16 => "Default",
2010+
32 => "TransitionHydration",
2011+
64 => "Transition",
19892012
128 => "Transition",
19902013
256 => "Transition",
19912014
512 => "Transition",
@@ -2005,48 +2028,48 @@ describe('Timeline profiler', () => {
20052028
8388608 => "Retry",
20062029
16777216 => "Retry",
20072030
33554432 => "Retry",
2008-
67108864 => "SelectiveHydration",
2009-
134217728 => "IdleHydration",
2010-
268435456 => "Idle",
2011-
536870912 => "Offscreen",
2012-
1073741824 => "Deferred",
2031+
67108864 => "Retry",
2032+
134217728 => "SelectiveHydration",
2033+
268435456 => "IdleHydration",
2034+
536870912 => "Idle",
2035+
1073741824 => "Offscreen",
20132036
},
20142037
"laneToReactMeasureMap": Map {
2015-
1 => [],
2016-
2 => [
2038+
1 => [
20172039
{
20182040
"batchUID": 1,
20192041
"depth": 0,
20202042
"duration": 0,
2021-
"lanes": "0b0000000000000000000000000000010",
2043+
"lanes": "0b0000000000000000000000000000001",
20222044
"timestamp": 10,
20232045
"type": "render-idle",
20242046
},
20252047
{
20262048
"batchUID": 1,
20272049
"depth": 0,
20282050
"duration": 0,
2029-
"lanes": "0b0000000000000000000000000000010",
2051+
"lanes": "0b0000000000000000000000000000001",
20302052
"timestamp": 10,
20312053
"type": "render",
20322054
},
20332055
{
20342056
"batchUID": 1,
20352057
"depth": 0,
20362058
"duration": 0,
2037-
"lanes": "0b0000000000000000000000000000010",
2059+
"lanes": "0b0000000000000000000000000000001",
20382060
"timestamp": 10,
20392061
"type": "commit",
20402062
},
20412063
{
20422064
"batchUID": 1,
20432065
"depth": 1,
20442066
"duration": 0,
2045-
"lanes": "0b0000000000000000000000000000010",
2067+
"lanes": "0b0000000000000000000000000000001",
20462068
"timestamp": 10,
20472069
"type": "layout-effects",
20482070
},
20492071
],
2072+
2 => [],
20502073
4 => [],
20512074
8 => [],
20522075
16 => [],
@@ -2083,7 +2106,7 @@ describe('Timeline profiler', () => {
20832106
"reactVersion": "<filtered-version>",
20842107
"schedulingEvents": [
20852108
{
2086-
"lanes": "0b0000000000000000000000000000010",
2109+
"lanes": "0b0000000000000000000000000000001",
20872110
"timestamp": 10,
20882111
"type": "schedule-render",
20892112
"warning": null,

0 commit comments

Comments
 (0)