fix: gate react/jsx-runtime upgrade only for React >= 17 tests (#28256)
https://github.com/facebook/react/pull/28252 broke RDT tests with React 16.x. These changes gate the `jsx-runtime` upgrade only for cases when we are testing against React >= 17. Validated with: ``` ./scripts/circleci/download_devtools_regression_build.js 16.0 --replaceBuild && node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 16.0 --ci && ./scripts/circleci/download_devtools_regression_build.js 16.5 --replaceBuild && node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 16.5 --ci && ./scripts/circleci/download_devtools_regression_build.js 16.8 --replaceBuild && node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 16.8 --ci && ./scripts/circleci/download_devtools_regression_build.js 17.0 --replaceBuild && node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 17.0 --ci && ./scripts/circleci/download_devtools_regression_build.js 18.0 --replaceBuild && node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 18.0 --ci ```
Ruslan Lesiutin committed
Feb 6, 2024 at 15:03 UTC
65d95b837e797a0690221dd1824955d3d3afd278
3 files changed
+33
-17
package.json
+1
@@ -27,6 +27,7 @@
27
"@babel/plugin-transform-modules-commonjs": "^7.10.4",
28
"@babel/plugin-transform-object-super": "^7.10.4",
29
"@babel/plugin-transform-parameters": "^7.10.5",
30
+ "@babel/plugin-transform-react-jsx-source": "^7.10.5",
31
"@babel/plugin-transform-react-jsx": "^7.23.4",
32
"@babel/plugin-transform-react-jsx-development": "^7.22.5",
33
"@babel/plugin-transform-shorthand-properties": "^7.10.4",
scripts/jest/devtools/setupEnv.js
+11
-9
@@ -31,9 +31,10 @@ global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR =
31
LIGHT_MODE_DIMMED_ERROR_COLOR;
32
global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
33
34
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
35
+
36
global._test_react_version = (range, testName, callback) => {
35
- const reactVersion = process.env.REACT_VERSION || ReactVersion;
36
- const shouldPass = semver.satisfies(reactVersion, range);
37
+ const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
38
39
if (shouldPass) {
40
test(testName, callback);
@@ -43,8 +44,7 @@ global._test_react_version = (range, testName, callback) => {
44
};
45
46
global._test_react_version_focus = (range, testName, callback) => {
46
- const reactVersion = process.env.REACT_VERSION || ReactVersion;
47
- const shouldPass = semver.satisfies(reactVersion, range);
47
+ const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
48
49
if (shouldPass) {
50
// eslint-disable-next-line jest/no-focused-tests
@@ -71,12 +71,14 @@ global._test_ignore_for_react_version = (testName, callback) => {
71
// Longer term we should migrate all our tests away from using require() and
72
// resetModules, and use import syntax instead so this kind of thing doesn't
73
// happen.
74
-lazyRequireFunctionExports('react/jsx-dev-runtime');
74
+if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
75
+ lazyRequireFunctionExports('react/jsx-dev-runtime');
76
76
-// TODO: We shouldn't need to do this in the production runtime, but until
77
-// we remove string refs they also depend on the shared state object. Remove
78
-// once we remove string refs.
79
-lazyRequireFunctionExports('react/jsx-runtime');
77
+ // TODO: We shouldn't need to do this in the production runtime, but until
78
+ // we remove string refs they also depend on the shared state object. Remove
79
+ // once we remove string refs.
80
+ lazyRequireFunctionExports('react/jsx-runtime');
81
+}
82
83
function lazyRequireFunctionExports(moduleName) {
84
jest.mock(moduleName, () => {
scripts/jest/preprocessor.js
+21
-8
@@ -8,6 +8,8 @@ const hermesParser = require('hermes-parser');
8
9
const tsPreprocessor = require('./typescript/preprocessor');
10
const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
11
+const {ReactVersion} = require('../../ReactVersions');
12
+const semver = require('semver');
13
14
const pathToBabel = path.join(
15
require.resolve('@babel/core'),
@@ -29,6 +31,8 @@ const pathToTransformReactVersionPragma = require.resolve(
31
const pathToBabelrc = path.join(__dirname, '..', '..', 'babel.config.js');
32
const pathToErrorCodes = require.resolve('../error-codes/codes.json');
33
34
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
35
+
36
const babelOptions = {
37
plugins: [
38
// For Node environment only. For builds, Rollup takes care of ESM.
@@ -81,14 +85,23 @@ module.exports = {
85
plugins.push(pathToTransformReactVersionPragma);
86
}
87
84
- plugins.push([
85
- process.env.NODE_ENV === 'development'
86
- ? require.resolve('@babel/plugin-transform-react-jsx-development')
87
- : require.resolve('@babel/plugin-transform-react-jsx'),
88
- // The "automatic" runtime corresponds to react/jsx-runtime. "classic"
89
- // would be React.createElement.
90
- {runtime: 'automatic'},
91
- ]);
88
+ // This is only for React DevTools tests with React 16.x
89
+ // `react/jsx-dev-runtime` and `react/jsx-runtime` are included in the package starting from v17
90
+ if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
91
+ plugins.push([
92
+ process.env.NODE_ENV === 'development'
93
+ ? require.resolve('@babel/plugin-transform-react-jsx-development')
94
+ : require.resolve('@babel/plugin-transform-react-jsx'),
95
+ // The "automatic" runtime corresponds to react/jsx-runtime. "classic"
96
+ // would be React.createElement.
97
+ {runtime: 'automatic'},
98
+ ]);
99
+ } else {
100
+ plugins.push(
101
+ require.resolve('@babel/plugin-transform-react-jsx'),
102
+ require.resolve('@babel/plugin-transform-react-jsx-source')
103
+ );
104
+ }
105
106
let sourceAst = hermesParser.parse(src, {babel: true});
107
return {