diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 3a97767e1fc..e9d5a1f4946 100644
--- a/config/webpack.config.dev.js
+++ b/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,7 +96,7 @@ module.exports = {
     // It's important to do this before Babel processes the JS.
     preLoaders: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         loader: 'eslint',
         include: paths.appSrc,
       }
@@ -101,7 +104,7 @@ module.exports = {
     loaders: [
       // Process JS with Babel.
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
         query: require('./babel.dev')
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index af9d35df408..be27a29e4bf 100644
--- a/config/webpack.config.prod.js
+++ b/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,7 +91,7 @@ module.exports = {
     // It's important to do this before Babel processes the JS.
     preLoaders: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         loader: 'eslint',
         include: paths.appSrc
       }
@@ -96,7 +99,7 @@ module.exports = {
     loaders: [
       // Process JS with Babel.
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
         query: require('./babel.prod')
diff --git a/scripts/utils/createJestConfig.js b/scripts/utils/createJestConfig.js
index 91c0fb498be..95a550be533 100644
--- a/scripts/utils/createJestConfig.js
+++ b/scripts/utils/createJestConfig.js
@@ -19,6 +19,7 @@ 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')
@@ -26,7 +27,8 @@ module.exports = (resolve, rootDir) => {
     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;