[DevTools] Add Pragma to Only Run Tests if Version Requirement Satisf…

…ied (#24533)

This PR:

Adds a transform-react-version-pragma that transforms // @reactVersion SEMVER_VERSION into _test_react_version(...) and _test_react_version_focus(...) that lets us only run a test if it satisfies the right react version.
Adds _test_react_version and _test_react_version_focus to the devtools setupEnv file
Add a devtools preprocessor file for devtools specific plugins

packages/react-devtools-shared/src/__tests__/setupEnv.js

@@ -1,5 +1,8 @@
 'use strict';
 
+const semver = require('semver');
+const ReactVersion = require('../../../shared/ReactVersion');
+
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -24,3 +27,24 @@ global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR = LIGHT_MODE_DIMMED_WARNING_COLOR;
 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;
+
+global._test_react_version = (range, testName, callback) => {
+  const trimmedRange = range.replaceAll(' ', '');
+  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+
+  if (shouldPass) {
+    test(testName, callback);
+  }
+};
+
+global._test_react_version_focus = (range, testName, callback) => {
+  const trimmedRange = range.replaceAll(' ', '');
+  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+
+  if (shouldPass) {
+    // eslint-disable-next-line jest/no-focused-tests
+    test.only(testName, callback);
+  }
+};

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

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+const semver = require('semver');
+
+let shouldPass;
+let isFocused;
+describe('transform-react-version-pragma', () => {
+  // eslint-disable-next-line no-unused-vars
+  const _test_react_version = (range, testName, cb) => {
+    test(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);
+      isFocused = true;
+      return cb(...args);
+    });
+  };
+
+  beforeEach(() => {
+    shouldPass = null;
+    isFocused = false;
+  });
+
+  // @reactVersion >= 17.9
+  test('reactVersion flag is on >=', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion >= 18.1
+  test('reactVersion flag is off >=', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  test('reactVersion flag is on <=', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion <= 17.9
+  test('reactVersion flag is off <=', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion > 17.9
+  test('reactVersion flag is on >', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion > 18.1
+  test('reactVersion flag is off >', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion < 18.1
+  test('reactVersion flag is on <', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion < 17.0.0
+  test('reactVersion flag is off <', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion = 18.0
+  test('reactVersion flag is on =', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion = 18.1
+  test('reactVersion flag is off =', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  /* eslint-disable jest/no-focused-tests */
+
+  // @reactVersion >= 18.1
+  fit('reactVersion fit', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  test.only('reactVersion test.only', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion <= 17.1
+  test('reactVersion multiple pragmas fail', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion >= 17.1
+  test('reactVersion multiple pragmas pass', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion <= 17.1
+  test.only('reactVersion focused multiple pragmas fail', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion >= 17.1
+  test.only('reactVersion focused multiple pragmas pass', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(true);
+  });
+});

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

@@ -0,0 +1,107 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const GATE_VERSION_STR = '@reactVersion ';
+
+function transform(babel) {
+  const {types: t} = babel;
+
+  // Runs tests conditionally based on the version of react (semver range) we are running
+  // Input:
+  //   @reactVersion >= 17.0
+  //   test('some test', () => {/*...*/})
+  //
+  // Output:
+  //    @reactVersion >= 17.0
+  //   _test_react_version('>= 17.0', 'some test', () => {/*...*/});
+  //
+  // See info about semver ranges here:
+  // https://www.npmjs.com/package/semver
+  function buildGateVersionCondition(comments) {
+    let conditions = null;
+    for (const line of comments) {
+      const commentStr = line.value.trim();
+      if (commentStr.startsWith(GATE_VERSION_STR)) {
+        const condition = t.stringLiteral(
+          commentStr.slice(GATE_VERSION_STR.length)
+        );
+        if (conditions === null) {
+          conditions = [condition];
+        } else {
+          conditions.push(condition);
+        }
+      }
+    }
+
+    if (conditions !== null) {
+      let condition = conditions[0];
+      for (let i = 1; i < conditions.length; i++) {
+        const right = conditions[i];
+        condition = t.logicalExpression('&&', condition, right);
+      }
+      return condition;
+    } else {
+      return null;
+    }
+  }
+
+  return {
+    name: 'transform-react-version-pragma',
+    visitor: {
+      ExpressionStatement(path) {
+        const statement = path.node;
+        const expression = statement.expression;
+        if (expression.type === 'CallExpression') {
+          const callee = expression.callee;
+          switch (callee.type) {
+            case 'Identifier': {
+              if (
+                callee.name === 'test' ||
+                callee.name === 'it' ||
+                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];
+                  }
+                }
+              }
+              break;
+            }
+            case 'MemberExpression': {
+              if (
+                callee.object.type === 'Identifier' &&
+                (callee.object.name === 'test' ||
+                  callee.object.name === 'it') &&
+                callee.property.type === 'Identifier' &&
+                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]
+                    );
+                  }
+                }
+              }
+              break;
+            }
+          }
+        }
+        return;
+      },
+    },
+  };
+}
+
+module.exports = transform;

scripts/jest/devtools/preprocessor.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const pathToTransformReactVersionPragma = require.resolve(
+  '../../babel/transform-react-version-pragma'
+);
+
+module.exports = {
+  devtoolsPlugins: [pathToTransformReactVersionPragma],
+};

scripts/jest/preprocessor.js

@@ -7,6 +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 pathToBabel = path.join(
   require.resolve('@babel/core'),
@@ -82,6 +83,9 @@ module.exports = {
       const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
         babelOptions.plugins
       );
+      if (isTestFile && isInDevToolsPackages) {
+        plugins.push(...devtoolsPlugins);
+      }
       return babel.transform(
         src,
         Object.assign(