[DevTools] ignore tests without reactVersion pragma if REACT_VERSION specified (#24555)

In DevTools tests, if the REACT_VERSION specified, we know this is a regression test (testing older React Versions). Because a lot of tests test the DevTools front end and we don't want to run them in the regression test scenario, we decided to only run tests that have the // @reactVersion pragma defined.

Because if there are no tests specified, jest will fail, we also opt to use jest.skip to skip all the tests that we don't want to run for a specific React version istead.

This PR makes this change.

Author: lunaruan

packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js

@@ -10,27 +10,40 @@ const semver = require('semver');
 
 let shouldPass;
 let isFocused;
+let shouldIgnore;
 describe('transform-react-version-pragma', () => {
+  const originalTest = test;
+
   // eslint-disable-next-line no-unused-vars
   const _test_react_version = (range, testName, cb) => {
-    test(testName, (...args) => {
-      shouldPass = semver.satisfies('18.0.0', range);
+    originalTest(testName, (...args) => {
+      shouldPass = !!semver.satisfies('18.0.0', range);
       return cb(...args);
     });
   };
 
   // eslint-disable-next-line no-unused-vars
   const _test_react_version_focus = (range, testName, cb) => {
-    test(testName, (...args) => {
-      shouldPass = semver.satisfies('18.0.0', range);
+    originalTest(testName, (...args) => {
+      shouldPass = !!semver.satisfies('18.0.0', range);
       isFocused = true;
       return cb(...args);
     });
   };
 
+  // eslint-disable-next-line no-unused-vars
+  const _test_ignore_for_react_version = (testName, cb) => {
+    originalTest(testName, (...args) => {
+      shouldIgnore = true;
+      shouldPass = false;
+      return cb(...args);
+    });
+  };
+
   beforeEach(() => {
     shouldPass = null;
     isFocused = false;
+    shouldIgnore = false;
   });
 
   // @reactVersion >= 17.9
@@ -124,4 +137,14 @@ describe('transform-react-version-pragma', () => {
     expect(shouldPass).toBe(true);
     expect(isFocused).toBe(true);
   });
+
+  test('ignore test if no reactVersion', () => {
+    expect(shouldPass).toBe(false);
+    expect(shouldIgnore).toBe(true);
+  });
+
+  test.only('ignore focused test if no reactVersion', () => {
+    expect(shouldPass).toBe(false);
+    expect(shouldIgnore).toBe(true);
+  });
 });

scripts/babel/transform-react-version-pragma.js

@@ -19,6 +19,10 @@ function transform(babel) {
   // See info about semver ranges here:
   // https://www.npmjs.com/package/semver
   function buildGateVersionCondition(comments) {
+    if (!comments) {
+      return null;
+    }
+
     let conditions = null;
     for (const line of comments) {
       const commentStr = line.value.trim();
@@ -62,15 +66,15 @@ function transform(babel) {
                 callee.name === 'fit'
               ) {
                 const comments = statement.leadingComments;
-                if (comments !== undefined) {
-                  const condition = buildGateVersionCondition(comments);
-                  if (condition !== null) {
-                    callee.name =
-                      callee.name === 'fit'
-                        ? '_test_react_version_focus'
-                        : '_test_react_version';
-                    expression.arguments = [condition, ...expression.arguments];
-                  }
+                const condition = buildGateVersionCondition(comments);
+                if (condition !== null) {
+                  callee.name =
+                    callee.name === 'fit'
+                      ? '_test_react_version_focus'
+                      : '_test_react_version';
+                  expression.arguments = [condition, ...expression.arguments];
+                } else {
+                  callee.name = '_test_ignore_for_react_version';
                 }
               }
               break;
@@ -84,14 +88,17 @@ function transform(babel) {
                 callee.property.name === 'only'
               ) {
                 const comments = statement.leadingComments;
-                if (comments !== undefined) {
-                  const condition = buildGateVersionCondition(comments);
-                  if (condition !== null) {
-                    statement.expression = t.callExpression(
-                      t.identifier('_test_react_version_focus'),
-                      [condition, ...expression.arguments]
-                    );
-                  }
+                const condition = buildGateVersionCondition(comments);
+                if (condition !== null) {
+                  statement.expression = t.callExpression(
+                    t.identifier('_test_react_version_focus'),
+                    [condition, ...expression.arguments]
+                  );
+                } else {
+                  statement.expression = t.callExpression(
+                    t.identifier('_test_ignore_for_react_version'),
+                    expression.arguments
+                  );
                 }
               }
               break;

scripts/jest/config.build-devtools.js

@@ -89,9 +89,7 @@ module.exports = Object.assign({}, baseConfig, {
   setupFiles: [
     ...baseConfig.setupFiles,
     require.resolve('./setupTests.build.js'),
-    require.resolve(
-      '../../packages/react-devtools-shared/src/__tests__/setupEnv.js'
-    ),
+    require.resolve('./devtools/setupEnv.js'),
   ],
   setupFilesAfterEnv: [
     require.resolve(

scripts/jest/devtools/preprocessor.js

@@ -4,6 +4,17 @@ const pathToTransformReactVersionPragma = require.resolve(
   '../../babel/transform-react-version-pragma'
 );
 
+function getDevToolsPlugins(filePath) {
+  const plugins = [];
+  if (
+    process.env.REACT_VERSION ||
+    filePath.match(/\/transform-react-version-pragma-test/)
+  ) {
+    plugins.push(pathToTransformReactVersionPragma);
+  }
+  return plugins;
+}
+
 module.exports = {
-  devtoolsPlugins: [pathToTransformReactVersionPragma],
+  getDevToolsPlugins,
 };

packages/react-devtools-shared/src/__tests__/setupEnv.js renamed to scripts/jest/devtools/setupEnv.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const semver = require('semver');
-const ReactVersion = require('../../../shared/ReactVersion');
+const ReactVersion = require('../../../packages/shared/ReactVersion');
 
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
@@ -30,21 +30,29 @@ global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
 
 global._test_react_version = (range, testName, callback) => {
   const trimmedRange = range.replaceAll(' ', '');
-  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const reactVersion = process.env.REACT_VERSION || ReactVersion.default;
   const shouldPass = semver.satisfies(reactVersion, trimmedRange);
 
   if (shouldPass) {
     test(testName, callback);
+  } else {
+    test.skip(testName, callback);
   }
 };
 
 global._test_react_version_focus = (range, testName, callback) => {
   const trimmedRange = range.replaceAll(' ', '');
-  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const reactVersion = process.env.REACT_VERSION || ReactVersion.default;
   const shouldPass = semver.satisfies(reactVersion, trimmedRange);
 
   if (shouldPass) {
     // eslint-disable-next-line jest/no-focused-tests
     test.only(testName, callback);
+  } else {
+    test.skip(testName, callback);
   }
 };
+
+global._test_ignore_for_react_version = (testName, callback) => {
+  test.skip(testName, callback);
+};

scripts/jest/preprocessor.js

@@ -7,7 +7,7 @@ const coffee = require('coffee-script');
 
 const tsPreprocessor = require('./typescript/preprocessor');
 const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
-const {devtoolsPlugins} = require('./devtools/preprocessor.js');
+const {getDevToolsPlugins} = require('./devtools/preprocessor.js');
 
 const pathToBabel = path.join(
   require.resolve('@babel/core'),
@@ -84,7 +84,7 @@ module.exports = {
         babelOptions.plugins
       );
       if (isTestFile && isInDevToolsPackages) {
-        plugins.push(...devtoolsPlugins);
+        plugins.push(...getDevToolsPlugins(filePath));
       }
       return babel.transform(
         src,