[DevTools] ignore tests without reactVersion pragma if REACT_VERSION specified

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 → 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,