fix: gate react/jsx-runtime upgrade only for React >= 17 tests

package.json

@@ -27,6 +27,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.10.4",
     "@babel/plugin-transform-object-super": "^7.10.4",
     "@babel/plugin-transform-parameters": "^7.10.5",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/plugin-transform-react-jsx-development": "^7.22.5",
     "@babel/plugin-transform-shorthand-properties": "^7.10.4",

scripts/jest/devtools/setupEnv.js

@@ -31,9 +31,10 @@ global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR =
   LIGHT_MODE_DIMMED_ERROR_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
 
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
+
 global._test_react_version = (range, testName, callback) => {
-  const reactVersion = process.env.REACT_VERSION || ReactVersion;
-  const shouldPass = semver.satisfies(reactVersion, range);
+  const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
 
   if (shouldPass) {
     test(testName, callback);
@@ -43,8 +44,7 @@ global._test_react_version = (range, testName, callback) => {
 };
 
 global._test_react_version_focus = (range, testName, callback) => {
-  const reactVersion = process.env.REACT_VERSION || ReactVersion;
-  const shouldPass = semver.satisfies(reactVersion, range);
+  const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
 
   if (shouldPass) {
     // eslint-disable-next-line jest/no-focused-tests
@@ -71,12 +71,14 @@ global._test_ignore_for_react_version = (testName, callback) => {
 // Longer term we should migrate all our tests away from using require() and
 // resetModules, and use import syntax instead so this kind of thing doesn't
 // happen.
-lazyRequireFunctionExports('react/jsx-dev-runtime');
+if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
+  lazyRequireFunctionExports('react/jsx-dev-runtime');
 
-// TODO: We shouldn't need to do this in the production runtime, but until
-// we remove string refs they also depend on the shared state object. Remove
-// once we remove string refs.
-lazyRequireFunctionExports('react/jsx-runtime');
+  // TODO: We shouldn't need to do this in the production runtime, but until
+  // we remove string refs they also depend on the shared state object. Remove
+  // once we remove string refs.
+  lazyRequireFunctionExports('react/jsx-runtime');
+}
 
 function lazyRequireFunctionExports(moduleName) {
   jest.mock(moduleName, () => {

scripts/jest/preprocessor.js

@@ -8,6 +8,8 @@ const hermesParser = require('hermes-parser');
 
 const tsPreprocessor = require('./typescript/preprocessor');
 const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
+const {ReactVersion} = require('../../ReactVersions');
+const semver = require('semver');
 
 const pathToBabel = path.join(
   require.resolve('@babel/core'),
@@ -29,6 +31,8 @@ const pathToTransformReactVersionPragma = require.resolve(
 const pathToBabelrc = path.join(__dirname, '..', '..', 'babel.config.js');
 const pathToErrorCodes = require.resolve('../error-codes/codes.json');
 
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
+
 const babelOptions = {
   plugins: [
     // For Node environment only. For builds, Rollup takes care of ESM.
@@ -81,14 +85,23 @@ module.exports = {
         plugins.push(pathToTransformReactVersionPragma);
       }
 
-      plugins.push([
-        process.env.NODE_ENV === 'development'
-          ? require.resolve('@babel/plugin-transform-react-jsx-development')
-          : require.resolve('@babel/plugin-transform-react-jsx'),
-        // The "automatic" runtime corresponds to react/jsx-runtime. "classic"
-        // would be React.createElement.
-        {runtime: 'automatic'},
-      ]);
+      // This is only for React DevTools tests with React 16.x
+      // `react/jsx-dev-runtime` and `react/jsx-runtime` are included in the package starting from v17
+      if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
+        plugins.push([
+          process.env.NODE_ENV === 'development'
+            ? require.resolve('@babel/plugin-transform-react-jsx-development')
+            : require.resolve('@babel/plugin-transform-react-jsx'),
+          // The "automatic" runtime corresponds to react/jsx-runtime. "classic"
+          // would be React.createElement.
+          {runtime: 'automatic'},
+        ]);
+      } else {
+        plugins.push(
+          require.resolve('@babel/plugin-transform-react-jsx'),
+          require.resolve('@babel/plugin-transform-react-jsx-source')
+        );
+      }
 
       let sourceAst = hermesParser.parse(src, {babel: true});
       return {