Iterating on DevTools tests: Trying to run tests against pre-build react-dom and react-test-renderers

Author: Brian Vaughn

.circleci/config.yml

@@ -84,16 +84,6 @@ jobs:
       - *run_yarn
       - run: yarn test-persistent --maxWorkers=2
 
-  test_source_devtools:
-    docker: *docker
-    environment: *environment
-
-    steps:
-      - checkout
-      - *restore_yarn_cache
-      - *run_yarn
-      - run: yarn test-devtools --maxWorkers=2
-
   test_source_prod:
     docker: *docker
     environment: *environment
@@ -168,6 +158,16 @@ jobs:
       - *run_yarn
       - run: yarn test-build --maxWorkers=2
 
+  test_build_devtools:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - *restore_yarn_cache
+      - *run_yarn
+      - run: yarn test-build-devtools --maxWorkers=2
+
   test_dom_fixtures:
     docker: *docker
     environment: *environment

package.json

@@ -102,14 +102,13 @@
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js",
     "debug-test": "cross-env NODE_ENV=development node --inspect-brk node_modules/.bin/jest --config ./scripts/jest/config.source.js --runInBand",
     "test": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js",
-    "test-devtools": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source-devtools.js",
-    "debug-test-devtools": "cross-env NODE_ENV=development node --inspect-brk node_modules/.bin/jest --config ./scripts/jest/config.source-devtools.js --runInBand",
     "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/.bin/jest --config ./scripts/jest/config.source-persistent.js --runInBand",
     "test-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source.js",
     "test-prod-build": "yarn test-build-prod",
     "test-build": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build.js",
     "test-build-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.build.js",
+    "test-build-devtools": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build-devtools.js",
     "test-dom-fixture": "cd fixtures/dom && yarn && yarn prestart && yarn test",
     "flow": "node ./scripts/tasks/flow.js",
     "flow-ci": "node ./scripts/tasks/flow-ci.js",

packages/react-devtools-shared/package.json

@@ -2,6 +2,10 @@
   "private": true,
   "name": "react-devtools-shared",
   "version": "0.0.0",
+  "devDependencies": {
+    "react-15": "npm:react@^15",
+    "react-dom-15": "npm:react-dom@^15"
+  },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@reach/menu-button": "^0.1.17",

scripts/jest/config.build-devtools.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const {readdirSync, statSync} = require('fs');
+const {join} = require('path');
+const baseConfig = require('./config.base');
+
+// Find all folders in packages/* with package.json
+const packagesRoot = join(__dirname, '..', '..', 'packages');
+const packages = readdirSync(packagesRoot).filter(dir => {
+  if (dir.charAt(0) === '.') {
+    return false;
+  }
+  if (dir.includes('react-devtools')) {
+    return false;
+  }
+  const packagePath = join(packagesRoot, dir, 'package.json');
+  return statSync(packagePath).isFile();
+});
+
+// Create a module map to point React packages to the build output
+const moduleNameMapper = {};
+
+// Allow bundle tests to read (but not write!) default feature flags.
+// This lets us determine whether we're running in different modes
+// without making relevant tests internal-only.
+moduleNameMapper[
+  '^shared/ReactFeatureFlags'
+] = `<rootDir>/packages/shared/forks/ReactFeatureFlags.readonly`;
+
+// Map packages to bundles
+packages.forEach(name => {
+  // Root entry point
+  moduleNameMapper[`^${name}$`] = `<rootDir>/build/node_modules/${name}`;
+  // Named entry points
+  moduleNameMapper[
+    `^${name}\/([^\/]+)$`
+  ] = `<rootDir>/build/node_modules/${name}/$1`;
+});
+
+module.exports = Object.assign({}, baseConfig, {
+  // Redirect imports to the compiled bundles
+  moduleNameMapper,
+  // Don't run bundle tests on -test.internal.* files
+  testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'],
+  // Exclude the build output from transforms
+  transformIgnorePatterns: ['/node_modules/', '<rootDir>/build/'],
+  testRegex: 'packages/react-devtools-shared/src/__tests__/[^]+.test.js$',
+  snapshotSerializers: [
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/storeSerializer.js'
+    ),
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupTests.build.js'),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/setupEnv.js'
+    ),
+  ],
+  // TODO (Jest v24) Rename "setupFilesAfterEnv" after Jest upgrade
+  setupTestFrameworkScriptFile: require.resolve(
+    '../../packages/react-devtools-shared/src/__tests__/setupTests.js'
+  ),
+});

scripts/jest/config.source-devtools.js

@@ -3632,7 +3632,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.2, create-react-class@^15.6.3:
+create-react-class@^15.6.0, create-react-class@^15.6.2, create-react-class@^15.6.3:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   dependencies:
@@ -9731,7 +9731,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.6.0, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9971,6 +9971,27 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+"react-15@npm:react@^15":
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+  integrity sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
+"react-dom-15@npm:react-dom@^15":
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
+  integrity sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 react-lifecycles-compat@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"