fix: ensure jest can run with React 16 and CSS Modules support (#2)

- extend polyfil to handle rAR, which is needed by React 16
- added s[ac]ss extension to moduleNameMapper in jest config to proxy import of css modules to {}

Author: dmatchley

packages/react-scripts/config/polyfills.js

@@ -6,19 +6,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 // @remove-on-eject-end
-'use strict';
+"use strict";
 
-if (typeof Promise === 'undefined') {
+if (typeof Promise === "undefined") {
   // Rejection tracking prevents a common issue where React gets into an
   // inconsistent state due to an error, but it gets swallowed by a Promise,
   // and the user has no idea what causes React's erratic future behavior.
-  require('promise/lib/rejection-tracking').enable();
-  window.Promise = require('promise/lib/es6-extensions.js');
+  require("promise/lib/rejection-tracking").enable();
+  window.Promise = require("promise/lib/es6-extensions.js");
 }
 
 // fetch() polyfill for making API calls.
-require('whatwg-fetch');
+require("whatwg-fetch");
 
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');
+Object.assign = require("object-assign");
+
+// To support React 16, we need to mock-fill requestAnimationFrame
+global.requestAnimationFrame = function(callback) {
+  setTimeout(callback, 0);
+};

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -5,53 +5,53 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const chalk = require('chalk');
-const paths = require('../../config/paths');
+const fs = require("fs");
+const chalk = require("chalk");
+const paths = require("../../config/paths");
 
 module.exports = (resolve, rootDir, isEjecting) => {
   // Use this instead of `paths.testsSetup` to avoid putting
   // an absolute filename into configuration after ejecting.
   const setupTestsFile = fs.existsSync(paths.testsSetup)
-    ? '<rootDir>/src/setupTests.js'
+    ? "<rootDir>/src/setupTests.js"
     : undefined;
 
   // TODO: I don't know if it's safe or not to just use / as path separator
   // in Jest configs. We need help from somebody with Windows to determine this.
   const config = {
-    collectCoverageFrom: ['src/**/*.{js,jsx}'],
-    setupFiles: [resolve('config/polyfills.js')],
+    collectCoverageFrom: ["src/**/*.{js,jsx}"],
+    setupFiles: [resolve("config/polyfills.js")],
     setupTestFrameworkScriptFile: setupTestsFile,
     testMatch: [
-      '<rootDir>/src/**/__tests__/**/*.js?(x)',
-      '<rootDir>/src/**/?(*.)(spec|test).js?(x)',
+      "<rootDir>/src/**/__tests__/**/*.js?(x)",
+      "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
     ],
-    testEnvironment: 'node',
-    testURL: 'http://localhost',
+    testEnvironment: "node",
+    testURL: "http://localhost",
     transform: {
-      '^.+\\.(js|jsx)$': isEjecting
-        ? '<rootDir>/node_modules/babel-jest'
-        : resolve('config/jest/babelTransform.js'),
-      '^.+\\.css$': resolve('config/jest/cssTransform.js'),
-      '^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'),
+      "^.+\\.(js|jsx)$": isEjecting
+        ? "<rootDir>/node_modules/babel-jest"
+        : resolve("config/jest/babelTransform.js"),
+      "^.+\\.(css|s[ca]ss)$": resolve("config/jest/cssTransform.js"),
+      "^(?!.*\\.(js|jsx|css|json)$)": resolve("config/jest/fileTransform.js")
     },
-    transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
+    transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
     moduleNameMapper: {
-      '^react-native$': 'react-native-web',
+      "^react-native$": "react-native-web"
     },
-    moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'node'],
+    moduleFileExtensions: ["web.js", "js", "json", "web.jsx", "jsx", "node"]
   };
   if (rootDir) {
     config.rootDir = rootDir;
   }
   const overrides = Object.assign({}, require(paths.appPackageJson).jest);
   const supportedKeys = [
-    'collectCoverageFrom',
-    'coverageReporters',
-    'coverageThreshold',
-    'snapshotSerializers',
+    "collectCoverageFrom",
+    "coverageReporters",
+    "coverageThreshold",
+    "snapshotSerializers"
   ];
   if (overrides) {
     supportedKeys.forEach(key => {
@@ -64,21 +64,21 @@ module.exports = (resolve, rootDir, isEjecting) => {
     if (unsupportedKeys.length) {
       console.error(
         chalk.red(
-          'Out of the box, Create React App only supports overriding ' +
-            'these Jest options:\n\n' +
-            supportedKeys.map(key => chalk.bold('  \u2022 ' + key)).join('\n') +
-            '.\n\n' +
-            'These options in your package.json Jest configuration ' +
-            'are not currently supported by Create React App:\n\n' +
+          "Out of the box, Create React App only supports overriding " +
+            "these Jest options:\n\n" +
+            supportedKeys.map(key => chalk.bold("  \u2022 " + key)).join("\n") +
+            ".\n\n" +
+            "These options in your package.json Jest configuration " +
+            "are not currently supported by Create React App:\n\n" +
             unsupportedKeys
-              .map(key => chalk.bold('  \u2022 ' + key))
-              .join('\n') +
-            '\n\nIf you wish to override other Jest options, you need to ' +
-            'eject from the default setup. You can do so by running ' +
-            chalk.bold('npm run eject') +
-            ' but remember that this is a one-way operation. ' +
-            'You may also file an issue with Create React App to discuss ' +
-            'supporting more options out of the box.\n'
+              .map(key => chalk.bold("  \u2022 " + key))
+              .join("\n") +
+            "\n\nIf you wish to override other Jest options, you need to " +
+            "eject from the default setup. You can do so by running " +
+            chalk.bold("npm run eject") +
+            " but remember that this is a one-way operation. " +
+            "You may also file an issue with Create React App to discuss " +
+            "supporting more options out of the box.\n"
         )
       );
       process.exit(1);

packages/react-scripts/yarn.lock

@@ -4464,11 +4464,7 @@ mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17,
   dependencies:
     mime-db "~1.30.0"
 
-[email protected]:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
-
-[email protected], mime@^1.3.4:
+[email protected], mime@^1.3.4, mime@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
@@ -6401,9 +6397,9 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-style-loader@0.18.2:
-  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+style-loader@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
@@ -6708,12 +6704,13 @@ urix@^0.1.0, urix@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
 
-url-loader@0.5.9:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
+url-loader@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
   dependencies:
     loader-utils "^1.0.2"
-    mime "1.3.x"
+    mime "^1.4.1"
+    schema-utils "^0.3.0"
 
 url-parse-lax@^1.0.0:
   version "1.0.0"