chore: use versioned render in preprocessData test and gate some for … (#28219)
Ruslan Lesiutin committed
Feb 6, 2024 at 17:34 UTC
8b5f0c43ad49943eba6e522a708cdbb47c5f9b26
1 file changed
+67
-44
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+67
-44
@@ -9,7 +9,12 @@
9
10
'use strict';
11
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;
18
19
describe('Timeline profiler', () => {
20
let React;
@@ -76,6 +81,13 @@ describe('Timeline profiler', () => {
81
}
82
83
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
+
91
utils = require('./utils');
92
utils.beforeEachProfiling();
93
@@ -107,6 +119,8 @@ describe('Timeline profiler', () => {
119
setPerformanceMock(null);
120
});
121
122
+ const {render: legacyRender} = getLegacyRenderImplementation();
123
+
124
describe('getLanesFromTransportDecimalBitmask', () => {
125
let getLanesFromTransportDecimalBitmask;
126
@@ -614,8 +628,10 @@ describe('Timeline profiler', () => {
628
`);
629
});
630
631
+ // @reactVersion <= 18.2
632
+ // @reactVersion >= 18.0
633
it('should process a sample legacy render sequence', async () => {
618
- utils.legacyRender(<div />, document.createElement('div'));
634
+ legacyRender(<div />);
635
636
const data = await preprocessData([
637
...createBoilerplateEntries(),
@@ -629,7 +645,7 @@ describe('Timeline profiler', () => {
645
"batchUID": 0,
646
"depth": 0,
647
"duration": 0.01,
632
- "lanes": "0b0000000000000000000000000000001",
648
+ "lanes": "0b0000000000000000000000000000000",
649
"timestamp": 0.006,
650
"type": "render-idle",
651
},
@@ -637,7 +653,7 @@ describe('Timeline profiler', () => {
653
"batchUID": 0,
654
"depth": 0,
655
"duration": 0.001,
640
- "lanes": "0b0000000000000000000000000000001",
656
+ "lanes": "0b0000000000000000000000000000000",
657
"timestamp": 0.006,
658
"type": "render",
659
},
@@ -645,7 +661,7 @@ describe('Timeline profiler', () => {
661
"batchUID": 0,
662
"depth": 0,
663
"duration": 0.008,
648
- "lanes": "0b0000000000000000000000000000001",
664
+ "lanes": "0b0000000000000000000000000000000",
665
"timestamp": 0.008,
666
"type": "commit",
667
},
@@ -653,7 +669,7 @@ describe('Timeline profiler', () => {
669
"batchUID": 0,
670
"depth": 1,
671
"duration": 0.001,
656
- "lanes": "0b0000000000000000000000000000001",
672
+ "lanes": "0b0000000000000000000000000000000",
673
"timestamp": 0.014,
674
"type": "layout-effects",
675
},
@@ -714,13 +730,12 @@ describe('Timeline profiler', () => {
730
30 => "Offscreen",
731
},
732
"laneToReactMeasureMap": Map {
717
- 0 => [],
718
- 1 => [
733
+ 0 => [
734
{
735
"batchUID": 0,
736
"depth": 0,
737
"duration": 0.01,
723
- "lanes": "0b0000000000000000000000000000001",
738
+ "lanes": "0b0000000000000000000000000000000",
739
"timestamp": 0.006,
740
"type": "render-idle",
741
},
@@ -728,7 +743,7 @@ describe('Timeline profiler', () => {
743
"batchUID": 0,
744
"depth": 0,
745
"duration": 0.001,
731
- "lanes": "0b0000000000000000000000000000001",
746
+ "lanes": "0b0000000000000000000000000000000",
747
"timestamp": 0.006,
748
"type": "render",
749
},
@@ -736,7 +751,7 @@ describe('Timeline profiler', () => {
751
"batchUID": 0,
752
"depth": 0,
753
"duration": 0.008,
739
- "lanes": "0b0000000000000000000000000000001",
754
+ "lanes": "0b0000000000000000000000000000000",
755
"timestamp": 0.008,
756
"type": "commit",
757
},
@@ -744,11 +759,12 @@ describe('Timeline profiler', () => {
759
"batchUID": 0,
760
"depth": 1,
761
"duration": 0.001,
747
- "lanes": "0b0000000000000000000000000000001",
762
+ "lanes": "0b0000000000000000000000000000000",
763
"timestamp": 0.014,
764
"type": "layout-effects",
765
},
766
],
767
+ 1 => [],
768
2 => [],
769
3 => [],
770
4 => [],
@@ -785,7 +801,7 @@ describe('Timeline profiler', () => {
801
"reactVersion": "<filtered-version>",
802
"schedulingEvents": [
803
{
788
- "lanes": "0b0000000000000000000000000000001",
804
+ "lanes": "0b0000000000000000000000000000000",
805
"timestamp": 0.005,
806
"type": "schedule-render",
807
"warning": null,
@@ -1132,9 +1148,9 @@ describe('Timeline profiler', () => {
1148
});
1149
1150
// @reactVersion >= 18.0
1151
+ // @reactVersion <= 18.2
1152
it('should error if events and measures are incomplete', async () => {
1136
- const container = document.createElement('div');
1137
- utils.legacyRender(<div />, container);
1153
+ legacyRender(<div />);
1154
1155
const invalidMarks = clearedMarks.filter(
1156
mark => !mark.includes('render-stop'),
@@ -1150,9 +1166,9 @@ describe('Timeline profiler', () => {
1166
});
1167
1168
// @reactVersion >= 18.0
1169
+ // @reactVersion <= 18.2
1170
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 />);
1172
1173
const invalidMarks = clearedMarks.filter(
1174
mark => !mark.includes('render-start'),
@@ -1262,6 +1278,7 @@ describe('Timeline profiler', () => {
1278
describe('warnings', () => {
1279
describe('long event handlers', () => {
1280
// @reactVersion >= 18.0
1281
+ // @reactVersion <= 18.2
1282
it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
1283
function App() {
1284
return null;
@@ -1275,7 +1292,7 @@ describe('Timeline profiler', () => {
1292
1293
clearPendingMarks();
1294
1278
- utils.legacyRender(<App />, document.createElement('div'));
1295
+ legacyRender(<App />);
1296
1297
testMarks.push(...createUserTimingData(clearedMarks));
1298
@@ -1285,6 +1302,7 @@ describe('Timeline profiler', () => {
1302
});
1303
1304
// @reactVersion >= 18.0
1305
+ // @reactVersion <= 18.2
1306
it('should not warn about long events if the cause was non-React JavaScript', async () => {
1307
function App() {
1308
return null;
@@ -1300,7 +1318,7 @@ describe('Timeline profiler', () => {
1318
1319
clearPendingMarks();
1320
1303
- utils.legacyRender(<App />, document.createElement('div'));
1321
+ legacyRender(<App />);
1322
1323
testMarks.push(...createUserTimingData(clearedMarks));
1324
@@ -1310,6 +1328,7 @@ describe('Timeline profiler', () => {
1328
});
1329
1330
// @reactVersion >= 18.0
1331
+ // @reactVersion <= 18.2
1332
it('should warn when React scedules a long (sync) update inside of an event', async () => {
1333
function App() {
1334
return null;
@@ -1323,7 +1342,7 @@ describe('Timeline profiler', () => {
1342
1343
clearPendingMarks();
1344
1326
- utils.legacyRender(<App />, document.createElement('div'));
1345
+ legacyRender(<App />);
1346
1347
clearedMarks.forEach(markName => {
1348
if (markName === '--render-stop') {
@@ -1929,8 +1948,12 @@ describe('Timeline profiler', () => {
1948
global.IS_REACT_ACT_ENVIRONMENT = true;
1949
});
1950
1951
+ const {render: legacyRender} = getLegacyRenderImplementation();
1952
+
1953
+ // @reactVersion <= 18.2
1954
+ // @reactVersion >= 18.0
1955
it('should process a sample legacy render sequence', async () => {
1933
- utils.legacyRender(<div />, document.createElement('div'));
1956
+ legacyRender(<div />);
1957
utils.act(() => store.profilerStore.stopProfiling());
1958
1959
const data = store.profilerStore.profilingData?.timelineData;
@@ -1944,7 +1967,7 @@ describe('Timeline profiler', () => {
1967
"batchUID": 1,
1968
"depth": 0,
1969
"duration": 0,
1947
- "lanes": "0b0000000000000000000000000000010",
1970
+ "lanes": "0b0000000000000000000000000000001",
1971
"timestamp": 10,
1972
"type": "render-idle",
1973
},
@@ -1952,7 +1975,7 @@ describe('Timeline profiler', () => {
1975
"batchUID": 1,
1976
"depth": 0,
1977
"duration": 0,
1955
- "lanes": "0b0000000000000000000000000000010",
1978
+ "lanes": "0b0000000000000000000000000000001",
1979
"timestamp": 10,
1980
"type": "render",
1981
},
@@ -1960,7 +1983,7 @@ describe('Timeline profiler', () => {
1983
"batchUID": 1,
1984
"depth": 0,
1985
"duration": 0,
1963
- "lanes": "0b0000000000000000000000000000010",
1986
+ "lanes": "0b0000000000000000000000000000001",
1987
"timestamp": 10,
1988
"type": "commit",
1989
},
@@ -1968,7 +1991,7 @@ describe('Timeline profiler', () => {
1991
"batchUID": 1,
1992
"depth": 1,
1993
"duration": 0,
1971
- "lanes": "0b0000000000000000000000000000010",
1994
+ "lanes": "0b0000000000000000000000000000001",
1995
"timestamp": 10,
1996
"type": "layout-effects",
1997
},
@@ -1979,13 +2002,13 @@ describe('Timeline profiler', () => {
2002
"flamechart": [],
2003
"internalModuleSourceToRanges": Map {},
2004
"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",
2012
128 => "Transition",
2013
256 => "Transition",
2014
512 => "Transition",
@@ -2005,20 +2028,19 @@ describe('Timeline profiler', () => {
2028
8388608 => "Retry",
2029
16777216 => "Retry",
2030
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",
2036
},
2037
"laneToReactMeasureMap": Map {
2015
- 1 => [],
2016
- 2 => [
2038
+ 1 => [
2039
{
2040
"batchUID": 1,
2041
"depth": 0,
2042
"duration": 0,
2021
- "lanes": "0b0000000000000000000000000000010",
2043
+ "lanes": "0b0000000000000000000000000000001",
2044
"timestamp": 10,
2045
"type": "render-idle",
2046
},
@@ -2026,7 +2048,7 @@ describe('Timeline profiler', () => {
2048
"batchUID": 1,
2049
"depth": 0,
2050
"duration": 0,
2029
- "lanes": "0b0000000000000000000000000000010",
2051
+ "lanes": "0b0000000000000000000000000000001",
2052
"timestamp": 10,
2053
"type": "render",
2054
},
@@ -2034,7 +2056,7 @@ describe('Timeline profiler', () => {
2056
"batchUID": 1,
2057
"depth": 0,
2058
"duration": 0,
2037
- "lanes": "0b0000000000000000000000000000010",
2059
+ "lanes": "0b0000000000000000000000000000001",
2060
"timestamp": 10,
2061
"type": "commit",
2062
},
@@ -2042,11 +2064,12 @@ describe('Timeline profiler', () => {
2064
"batchUID": 1,
2065
"depth": 1,
2066
"duration": 0,
2045
- "lanes": "0b0000000000000000000000000000010",
2067
+ "lanes": "0b0000000000000000000000000000001",
2068
"timestamp": 10,
2069
"type": "layout-effects",
2070
},
2071
],
2072
+ 2 => [],
2073
4 => [],
2074
8 => [],
2075
16 => [],
@@ -2083,7 +2106,7 @@ describe('Timeline profiler', () => {
2106
"reactVersion": "<filtered-version>",
2107
"schedulingEvents": [
2108
{
2086
- "lanes": "0b0000000000000000000000000000010",
2109
+ "lanes": "0b0000000000000000000000000000001",
2110
"timestamp": 10,
2111
"type": "schedule-render",
2112
"warning": null,