diff --git a/packages/react-scripts/config/jest/transform.js b/packages/react-scripts/config/jest/babelTransform.js similarity index 100% rename from packages/react-scripts/config/jest/transform.js rename to packages/react-scripts/config/jest/babelTransform.js diff --git a/packages/react-scripts/config/jest/FileStub.js b/packages/react-scripts/config/jest/cssTransform.js similarity index 52% rename from packages/react-scripts/config/jest/FileStub.js rename to packages/react-scripts/config/jest/cssTransform.js index c95c3e790a1..eead954406b 100644 --- a/packages/react-scripts/config/jest/FileStub.js +++ b/packages/react-scripts/config/jest/cssTransform.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 --git a/packages/react-scripts/config/jest/CSSStub.js b/packages/react-scripts/config/jest/fileTransform.js similarity index 54% rename from packages/react-scripts/config/jest/CSSStub.js rename to packages/react-scripts/config/jest/fileTransform.js index 05810269ac6..82c672bebd3 100644 --- a/packages/react-scripts/config/jest/CSSStub.js +++ b/packages/react-scripts/config/jest/fileTransform.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 --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index a2bd4961026..2ae89a4530e 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.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 --git a/packages/react-scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js index 2b0c4bf0fc8..162ec918278 100644 --- a/packages/react-scripts/utils/createJestConfig.js +++ b/packages/react-scripts/utils/createJestConfig.js @@ -17,27 +17,30 @@ module.exports = (resolve, rootDir, isEjecting) => { // an absolute filename into configuration after ejecting. const setupTestsFile = pathExists.sync(paths.testsSetup) ? '/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: ['/(build|docs|node_modules)/'], + testPathIgnorePatterns: [ + '[/\\\\](build|docs|node_modules)[/\\\\]' + ], testEnvironment: 'node', testURL: 'http://localhost', + transform: { + '^.+\\.(js|jsx)$': isEjecting ? + '/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; };