Adds JSX extension support (#563)

* Adds JSX extension support

* PR changes

* Add testRegex

* Add note about not recommending JSX, link to issue

Author: tizmagik

config/webpack.config.dev.js

@@ -74,7 +74,10 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/253
     fallback: paths.nodePaths,
     // These are the reasonable defaults supported by the Node ecosystem.
-    extensions: ['.js', '.json', ''],
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    extensions: ['.js', '.json', '.jsx', ''],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -93,15 +96,15 @@ module.exports = {
     // It's important to do this before Babel processes the JS.
     preLoaders: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         loader: 'eslint',
         include: paths.appSrc,
       }
     ],
     loaders: [
       // Process JS with Babel.
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
         query: require('./babel.dev')

config/webpack.config.prod.js

@@ -69,7 +69,10 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/253
     fallback: paths.nodePaths,
     // These are the reasonable defaults supported by the Node ecosystem.
-    extensions: ['.js', '.json', ''],
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    extensions: ['.js', '.json', '.jsx', ''],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -88,15 +91,15 @@ module.exports = {
     // It's important to do this before Babel processes the JS.
     preLoaders: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         loader: 'eslint',
         include: paths.appSrc
       }
     ],
     loaders: [
       // Process JS with Babel.
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
         query: require('./babel.prod')

scripts/utils/createJestConfig.js

@@ -19,14 +19,16 @@ module.exports = (resolve, rootDir) => {
   }
 
   const config = {
+    moduleFileExtensions: ['jsx', 'js', 'json'],
     moduleNameMapper: {
       '^[./a-zA-Z0-9$_-]+\\.(jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
       '^[./a-zA-Z0-9$_-]+\\.css$': resolve('config/jest/CSSStub.js')
     },
     scriptPreprocessor: resolve('config/jest/transform.js'),
     setupFiles: setupFiles,
     testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
-    testEnvironment: 'node'
+    testEnvironment: 'node',
+    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(js|jsx)$',
   };
   if (rootDir) {
     config.rootDir = rootDir;