Let Jest handle all file types (#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

Diff for: packages/react-scripts/config/jest/transform.js renamed to packages/react-scripts/config/jest/babelTransform.js

@@ -5,9 +5,18 @@
  * 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";
+// 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';
+  },
+};

Diff for: packages/react-scripts/config/jest/FileStub.js renamed to 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 = {};
+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)) + ';';
+  },
+};

Diff for: packages/react-scripts/config/jest/CSSStub.js renamed to 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')

Diff for: packages/react-scripts/scripts/eject.js

@@ -17,27 +17,30 @@ 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 = {
     collectCoverageFrom: ['src/**/*.{js,jsx}'],
-    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$': 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;
 };