Let Jest handle all file types

Author: gaearon

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';
+  },
+};

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)) + ';';
+  },
+};

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')

packages/react-scripts/scripts/eject.js

@@ -19,25 +19,28 @@ module.exports = (resolve, rootDir, isEjecting) => {
 
   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)/'],
     testEnvironment: 'node',
     testURL: 'http://localhost',
+    transform: {
+      '^.+\\.css$': resolve('config/jest/cssTransform.js'),
+      '^.+\\.(?!(js|jsx|css|json)$)[^\\.]+$': resolve('config/jest/fileTransform.js'),
+    },
+    transformIgnorePatterns: [
+      '/node_modules/.+\.(js|jsx|json)$'
+    ],
   };
   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'),
-    };
+    Object.assign(config.transform, {
+      '^.+\\.(js|jsx)$': resolve('config/jest/babelTransform.js'),
+    });
   }
   return config;
 };