Let Jest handle all file types (facebook#1197)

* Let Jest handle all file types

* Update regexes

* Fix exclusion regex to also exclude files without extension
* Be over-cautious with Windows paths because I'm not sure how Jest handles them

* There is no automatic babel-jest discovery now that we use transsform

Author: gaearon

packages/react-scripts/config/jest/CSSStub.js

@@ -1,15 +1,3 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @flow
- */
-// @remove-on-eject-end
-
 /*
 * ZEAL: Stub style imports with identity proxy to allow testing of
 * dynamic styles etc

packages/react-scripts/config/jest/transform.js packages/react-scripts/config/jest/babelTransform.js

@@ -0,0 +1,22 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+// @remove-on-eject-end
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/tutorial-webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey(fileData, filename) {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

packages/react-scripts/config/jest/cssTransform.js

@@ -5,9 +5,16 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @flow
  */
 // @remove-on-eject-end
 
-module.exports = "test-file-stub";
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/tutorial-webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+  },
+};

packages/react-scripts/config/jest/FileStub.js packages/react-scripts/config/jest/fileTransform.js

@@ -56,8 +56,8 @@ prompt(
     path.join('config', 'polyfills.js'),
     path.join('config', 'webpack.config.dev.js'),
     path.join('config', 'webpack.config.prod.js'),
-    path.join('config', 'jest', 'CSSStub.js'),
-    path.join('config', 'jest', 'FileStub.js'),
+    path.join('config', 'jest', 'cssTransform.js'),
+    path.join('config', 'jest', 'fileTransform.js'),
     path.join('scripts', 'build.js'),
     path.join('scripts', 'start.js'),
     path.join('scripts', 'test.js')

packages/react-scripts/scripts/eject.js

@@ -17,31 +17,36 @@ module.exports = (resolve, rootDir, isEjecting) => {
   // an absolute filename into configuration after ejecting.
   const setupTestsFile = pathExists.sync(paths.testsSetup) ? '<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 = {
     // ZEAL: Coverage report to inlcude all client src code
     collectCoverageFrom: ['client/**/*.js', '!client/**/*-spec.js'],
     // ZEAL: Configure resolving imports from client root
     moduleDirectories: [paths.appSrc, paths.appNodeModules, paths.ownNodeModules],
-    moduleFileExtensions: ['jsx', 'js', 'json'],
     moduleNameMapper: {
-      '^.+\\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'),
       '^.+\\.(css|scss)$': resolve('config/jest/CSSStub.js')
     },
     setupFiles: [resolve('config/polyfills.js')],
     setupTestFrameworkScriptFile: setupTestsFile,
-    testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
+    testPathIgnorePatterns: [
+      '<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]'
+    ],
     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'),
+    },
+    transformIgnorePatterns: [
+      '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'
+    ],
   };
   if (rootDir) {
     config.rootDir = rootDir;
   }
-  if (!isEjecting) {
-    // This is unnecessary after ejecting because Jest
-    // will just use .babelrc in the project folder.
-    config.transform = {
-      '^.+\\.(js|jsx)$': resolve('config/jest/transform.js'),
-    };
-  }
   return config;
 };