diff --git a/package.json b/package.json index 9a4fdf3cc6625..93f09e40460c2 100644 --- a/package.json +++ b/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", diff --git a/scripts/jest/devtools/setupEnv.js b/scripts/jest/devtools/setupEnv.js index beaf9c3044ae2..eadbbcb0afaed 100644 --- a/scripts/jest/devtools/setupEnv.js +++ b/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, () => { diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js index bf9fe7fed3604..f04cd2c3cfc84 100644 --- a/scripts/jest/preprocessor.js +++ b/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 {