Add test run that uses www feature flags

.circleci/config.yml

@@ -115,6 +115,106 @@ jobs:
             RELEASE_CHANNEL: experimental
           command: yarn test --maxWorkers=2
 
+  test_source_www:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: yarn test-www --maxWorkers=2
+
+  test_source_www_variant:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: yarn test-www-variant --maxWorkers=2
+
+  test_source_www_prod:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            NODE_ENV: production
+            RELEASE_CHANNEL: stable
+          command: yarn test-www --maxWorkers=2
+
+  test_source_www_variant_prod:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            NODE_ENV: production
+            RELEASE_CHANNEL: stable
+          command: yarn test-www-variant --maxWorkers=2
+
+  test_source_www_experimental:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: yarn test-www --maxWorkers=2
+
+  test_source_www_variant_experimental:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: yarn test-www-variant --maxWorkers=2
+
+  test_source_www_prod_experimental:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            NODE_ENV: production
+            RELEASE_CHANNEL: experimental
+          command: yarn test-www --maxWorkers=2
+
+  test_source_www_variant_prod_experimental:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            NODE_ENV: production
+            RELEASE_CHANNEL: experimental
+          command: yarn test-www-variant --maxWorkers=2
+
   test_source_persistent:
     docker: *docker
     environment: *environment
@@ -384,6 +484,18 @@ workflows:
       - test_source_persistent:
           requires:
             - setup
+      - test_source_www:
+          requires:
+            - setup
+      - test_source_www_variant:
+          requires:
+            - setup
+      - test_source_www_prod:
+          requires:
+            - setup
+      - test_source_www_variant_prod:
+          requires:
+            - setup
       - build:
           requires:
             - setup
@@ -415,6 +527,18 @@ workflows:
       - test_source_prod_experimental:
           requires:
             - setup
+      - test_source_www_experimental:
+          requires:
+            - setup
+      - test_source_www_variant_experimental:
+          requires:
+            - setup
+      - test_source_www_prod_experimental:
+          requires:
+            - setup
+      - test_source_www_variant_prod_experimental:
+          requires:
+            - setup
       - build_experimental:
           requires:
             - setup

.eslintrc.js

@@ -11,10 +11,7 @@ const OFF = 0;
 const ERROR = 2;
 
 module.exports = {
-  extends: [
-    'fbjs',
-    'prettier'
-  ],
+  extends: ['fbjs', 'prettier'],
 
   // Stop ESLint from looking for a configuration file in parent folders
   root: true,
@@ -147,7 +144,7 @@ module.exports = {
         'scripts/**/*.js',
         'packages/*/npm/**/*.js',
         'packages/dom-event-testing-library/**/*.js',
-        'packages/react-devtools*/**/*.js'
+        'packages/react-devtools*/**/*.js',
       ],
       rules: {
         'react-internal/no-production-logging': OFF,
@@ -171,6 +168,7 @@ module.exports = {
     __PROFILE__: true,
     __UMD__: true,
     __EXPERIMENTAL__: true,
+    __VARIANT__: true,
     trustedTypes: true,
   },
 };

package.json

@@ -108,6 +108,8 @@
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
     "debug-test": "cross-env NODE_ENV=development node --inspect-brk node_modules/jest/bin/jest.js --config ./scripts/jest/config.source.js --runInBand",
     "test": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js",
+    "test-www": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source-www.js",
+    "test-www-variant": "cross-env NODE_ENV=development VARIANT=true jest --config ./scripts/jest/config.source-www.js",
     "test-persistent": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source-persistent.js",
     "debug-test-persistent": "cross-env NODE_ENV=development node --inspect-brk node_modules/jest/bin/jest.js --config ./scripts/jest/config.source-persistent.js --runInBand",
     "test-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source.js",

packages/react-dom/src/__tests__/ReactServerRendering-test.js

@@ -14,6 +14,8 @@ let React;
 let ReactDOMServer;
 let PropTypes;
 let ReactCurrentDispatcher;
+let enableSuspenseServerRenderer = require('shared/ReactFeatureFlags')
+  .enableSuspenseServerRenderer;
 
 function normalizeCodeLocInfo(str) {
   return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
@@ -686,7 +688,7 @@ describe('ReactDOMServer', () => {
     expect(markup).toBe('<div></div>');
   });
 
-  if (!__EXPERIMENTAL__) {
+  if (!enableSuspenseServerRenderer) {
     it('throws for unsupported types on the server', () => {
       expect(() => {
         ReactDOMServer.renderToString(<React.Suspense />);

packages/react-reconciler/src/ReactFiber.js

@@ -973,10 +973,10 @@ export function assignFiberPropertiesInDEV(
   }
   if (enableUserTimingAPI) {
     target._debugID = source._debugID;
+    target._debugIsCurrentlyTiming = source._debugIsCurrentlyTiming;
   }
   target._debugSource = source._debugSource;
   target._debugOwner = source._debugOwner;
-  target._debugIsCurrentlyTiming = source._debugIsCurrentlyTiming;
   target._debugNeedsRemount = source._debugNeedsRemount;
   target._debugHookTypes = source._debugHookTypes;
   return target;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+// In www, these flags are controlled by GKs. Because most GKs have some
+// population running in either mode, we should run our tests that way, too,
+//
+// Use __VARIANT__ to simulate a GK. The tests will be run twice: once
+// with the __VARIANT__ set to `true`, and once set to `false`.
+
+export const deferPassiveEffectCleanupDuringUnmount = __VARIANT__;
+export const runAllPassiveEffectDestroysBeforeCreates = __VARIANT__;
+export const warnAboutSpreadingKeyToJSX = __VARIANT__;
+
+// These are already tested in both modes using the build type dimension,
+// so we don't need to use __VARIANT__ to get extra coverage.
+export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
+export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
+
+// TODO: These flags are hard-coded to the default values used in open source.
+// Update the tests so that they pass in either mode, then set these
+// to __VARIANT__.
+export const enableTrustedTypesIntegration = false;
+export const warnAboutShorthandPropertyCollision = true;
+export const disableInputAttributeSyncing = false;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableModernEventSystem = false;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -9,8 +9,11 @@
 
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as ExportsType from './ReactFeatureFlags.www';
+import typeof * as DynamicFeatureFlags from './ReactFeatureFlags.www-dynamic';
 
 // Re-export dynamic flags from the www version.
+const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');
+
 export const {
   debugRenderPhaseSideEffectsForStrictMode,
   deferPassiveEffectCleanupDuringUnmount,
@@ -20,8 +23,9 @@ export const {
   warnAboutShorthandPropertyCollision,
   disableSchedulerTimeoutBasedOnReactExpirationTime,
   warnAboutSpreadingKeyToJSX,
+  replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableModernEventSystem,
-} = require('ReactFeatureFlags');
+} = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
 // It's not used anywhere in production yet.
@@ -39,7 +43,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSchedulerDebugging = true;
 
-export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const warnAboutDeprecatedLifecycles = true;
 export const disableLegacyContext = __EXPERIMENTAL__;
 export const warnAboutStringRefs = false;

scripts/flow/environment.js

@@ -12,6 +12,7 @@
 declare var __PROFILE__: boolean;
 declare var __UMD__: boolean;
 declare var __EXPERIMENTAL__: boolean;
+declare var __VARIANT__: boolean;
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: any; /*?{
   inject: ?((stuff: Object) => void)

scripts/jest/config.source-www.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const baseConfig = require('./config.base');
+
+const RELEASE_CHANNEL = process.env.RELEASE_CHANNEL;
+
+// Default to building in experimental mode. If the release channel is set via
+// an environment variable, then check if it's "experimental".
+const __EXPERIMENTAL__ =
+  typeof RELEASE_CHANNEL === 'string'
+    ? RELEASE_CHANNEL === 'experimental'
+    : true;
+
+const preferredExtension = __EXPERIMENTAL__ ? '.js' : '.stable.js';
+
+const moduleNameMapper = {};
+moduleNameMapper[
+  '^react$'
+] = `<rootDir>/packages/react/index${preferredExtension}`;
+moduleNameMapper[
+  '^react-dom$'
+] = `<rootDir>/packages/react-dom/index${preferredExtension}`;
+
+module.exports = Object.assign({}, baseConfig, {
+  // Prefer the stable forks for tests.
+  moduleNameMapper,
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-shared',
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupHostConfigs.js'),
+    require.resolve('./setupTests.www.js'),
+  ],
+});

scripts/jest/setupEnvironment.js

@@ -17,6 +17,8 @@ global.__EXPERIMENTAL__ =
     ? RELEASE_CHANNEL === 'experimental'
     : true;
 
+global.__VARIANT__ = !!process.env.VARIANT;
+
 if (typeof window !== 'undefined') {
   global.requestIdleCallback = function(callback) {
     return setTimeout(() => {

scripts/jest/setupTests.www.js

@@ -0,0 +1,23 @@
+'use strict';
+
+jest.mock('shared/ReactFeatureFlags', () => {
+  jest.mock(
+    'ReactFeatureFlags',
+    () => jest.requireActual('shared/forks/ReactFeatureFlags.www-dynamic'),
+    {virtual: true}
+  );
+
+  const wwwFlags = jest.requireActual('shared/forks/ReactFeatureFlags.www');
+  const defaultFlags = jest.requireActual('shared/ReactFeatureFlags');
+
+  // TODO: Many tests were written before we started running them against the
+  // www configuration. Update those tests so that they work against the www
+  // configuration, too. Then remove these overrides.
+  wwwFlags.disableLegacyContext = defaultFlags.disableLegacyContext;
+  wwwFlags.warnAboutUnmockedScheduler = defaultFlags.warnAboutUnmockedScheduler;
+  wwwFlags.enableUserTimingAPI = defaultFlags.enableUserTimingAPI;
+  wwwFlags.disableJavaScriptURLs = defaultFlags.disableJavaScriptURLs;
+  wwwFlags.enableDeprecatedFlareAPI = defaultFlags.enableDeprecatedFlareAPI;
+
+  return wwwFlags;
+});

scripts/rollup/build.js

@@ -391,6 +391,7 @@ function getPlugins(
       __UMD__: isUMDBundle ? 'true' : 'false',
       'process.env.NODE_ENV': isProduction ? "'production'" : "'development'",
       __EXPERIMENTAL__,
+      __VARIANT__: false,
     }),
     // The CommonJS plugin *only* exists to pull "art" into "react-art".
     // I'm going to port "art" to ES modules to avoid this problem.