Improve cra config test coverage

app/react/src/server/__mocks__/mockConfig.js

@@ -0,0 +1,24 @@
+class BaseTestPlugin1 {}
+class BaseTestPlugin2 {}
+
+export default {
+  devtool: 'cheap-eval-source-map',
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    alias: {
+      baseAlias: 'base-alias',
+    },
+  },
+  module: {
+    noParse: /jquery/,
+    rules: [
+      {
+        test: /\.js$/,
+        include: 'app/baseSrc',
+        loader: 'babel-loader',
+        options: {},
+      },
+    ],
+  },
+  plugins: [new BaseTestPlugin1(), new BaseTestPlugin2()],
+};

app/react/src/server/__mocks__/react-scripts-2-0-0/config/webpack.config.dev.js

@@ -0,0 +1,63 @@
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+class CRATestPlugin1 {}
+class CRATestPlugin2 {}
+
+module.exports = {
+  devtool: 'source-map',
+  resolve: {
+    extensions: [],
+    alias: {
+      'react-native': 'react-native-web',
+    },
+  },
+  module: {
+    strictExportPresence: true,
+    rules: [
+      {
+        test: /\.(js|mjs|jsx)$/,
+        enforce: 'pre',
+        use: [
+          {
+            options: {},
+            loader: 'eslint-loader',
+          },
+        ],
+        include: 'app/src',
+      },
+      {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: 'app/src',
+        loader: 'babel-loader',
+        options: {},
+      },
+      {
+        test: cssRegex,
+        exclude: cssModuleRegex,
+        use: 'style-loader',
+        sideEffects: true,
+      },
+      {
+        test: cssModuleRegex,
+        use: 'style-loader',
+      },
+      {
+        test: sassRegex,
+        exclude: sassModuleRegex,
+        use: 'sass-loader',
+        sideEffects: true,
+      },
+      {
+        test: sassModuleRegex,
+        use: 'sass-loader',
+      },
+    ],
+  },
+  plugins: [new CRATestPlugin1(), new CRATestPlugin2()],
+  optimization: {
+    minimize: true,
+  },
+};

app/react/src/server/__mocks__/react-scripts-2-0-0/package.json

@@ -0,0 +1,4 @@
+{
+  "version": "2.0.0",
+  "name": "react-scripts"
+}

app/react/src/server/__mocks__/react-scripts-2-1-0/config/webpack.config.dev.js

@@ -0,0 +1,63 @@
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+class CRATestPlugin1 {}
+class CRATestPlugin2 {}
+
+module.exports = {
+  devtool: 'source-map',
+  resolve: {
+    extensions: [],
+    alias: {
+      'react-native': 'react-native-web',
+    },
+  },
+  module: {
+    strictExportPresence: true,
+    rules: [
+      {
+        test: /\.(js|mjs|jsx)$/,
+        enforce: 'pre',
+        use: [
+          {
+            options: {},
+            loader: 'eslint-loader',
+          },
+        ],
+        include: 'app/src',
+      },
+      {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: 'app/src',
+        loader: 'babel-loader',
+        options: {},
+      },
+      {
+        test: cssRegex,
+        exclude: cssModuleRegex,
+        use: 'style-loader',
+        sideEffects: true,
+      },
+      {
+        test: cssModuleRegex,
+        use: 'style-loader',
+      },
+      {
+        test: sassRegex,
+        exclude: sassModuleRegex,
+        use: 'sass-loader',
+        sideEffects: true,
+      },
+      {
+        test: sassModuleRegex,
+        use: 'sass-loader',
+      },
+    ],
+  },
+  plugins: [new CRATestPlugin1(), new CRATestPlugin2()],
+  optimization: {
+    minimize: true,
+  },
+};

app/react/src/server/__mocks__/react-scripts-2-1-0/package.json

@@ -0,0 +1,4 @@
+{
+  "version": "2.1.0",
+  "name": "react-scripts"
+}

app/react/src/server/__snapshots__/cra-config.test.js.snap

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cra-config when used with TypeScript should apply Babel and styling webpack rules 1`] = `
+Object {
+  "devtool": "cheap-eval-source-map",
+  "module": Object {
+    "noParse": /jquery/,
+    "rules": Array [
+      Object {
+        "include": "app/baseSrc",
+        "loader": "babel-loader",
+        "options": Object {},
+        "test": /\\\\\\.js\\$/,
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "sideEffects": true,
+        "test": /\\\\\\.css\\$/,
+        "use": "style-loader",
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": "style-loader",
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
+        "sideEffects": true,
+        "test": /\\\\\\.\\(scss\\|sass\\)\\$/,
+        "use": "sass-loader",
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
+        "use": "sass-loader",
+      },
+      Object {
+        "include": Array [
+          "app/src",
+          "/test-project",
+        ],
+        "loader": "babel-loader",
+        "options": Object {},
+        "test": /\\\\\\.\\(js\\|mjs\\|jsx\\|ts\\|tsx\\)\\$/,
+      },
+    ],
+  },
+  "plugins": Array [
+    BaseTestPlugin1 {},
+    BaseTestPlugin2 {},
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "baseAlias": "base-alias",
+    },
+    "extensions": Array [
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx",
+    ],
+  },
+}
+`;
+
+exports[`cra-config when used without TypeScript should apply styling webpack rules 1`] = `
+Object {
+  "devtool": "cheap-eval-source-map",
+  "module": Object {
+    "noParse": /jquery/,
+    "rules": Array [
+      Object {
+        "include": "app/baseSrc",
+        "loader": "babel-loader",
+        "options": Object {},
+        "test": /\\\\\\.js\\$/,
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "sideEffects": true,
+        "test": /\\\\\\.css\\$/,
+        "use": "style-loader",
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": "style-loader",
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
+        "sideEffects": true,
+        "test": /\\\\\\.\\(scss\\|sass\\)\\$/,
+        "use": "sass-loader",
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
+        "use": "sass-loader",
+      },
+    ],
+  },
+  "plugins": Array [
+    BaseTestPlugin1 {},
+    BaseTestPlugin2 {},
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "baseAlias": "base-alias",
+    },
+    "extensions": Array [
+      ".js",
+      ".jsx",
+    ],
+  },
+}
+`;

app/react/src/server/cra-config.test.js

@@ -1,6 +1,8 @@
 import fs from 'fs';
-import { getReactScriptsPath, getTypeScriptRules } from './cra-config';
+import path from 'path';
+import { getReactScriptsPath, getTypeScriptRules, applyCRAWebpackConfig } from './cra-config';
 import mockRules from './__mocks__/mockRules';
+import mockConfig from './__mocks__/mockConfig';
 
 jest.mock('fs', () => ({
   realpathSync: jest.fn(),
@@ -17,8 +19,8 @@ describe('cra-config', () => {
 
   describe('when used with the default react-scripts package', () => {
     beforeEach(() => {
-      fs.realpathSync.mockImplementationOnce(path =>
-        path.replace(SCRIPT_PATH, `react-scripts/${SCRIPT_PATH}`)
+      fs.realpathSync.mockImplementationOnce(filePath =>
+        filePath.replace(SCRIPT_PATH, `react-scripts/${SCRIPT_PATH}`)
       );
     });
 
@@ -31,8 +33,8 @@ describe('cra-config', () => {
 
   describe('when used with a custom react-scripts package', () => {
     beforeEach(() => {
-      fs.realpathSync.mockImplementationOnce(path =>
-        path.replace(SCRIPT_PATH, `custom-react-scripts/${SCRIPT_PATH}`)
+      fs.realpathSync.mockImplementationOnce(filePath =>
+        filePath.replace(SCRIPT_PATH, `custom-react-scripts/${SCRIPT_PATH}`)
       );
     });
 
@@ -43,18 +45,42 @@ describe('cra-config', () => {
     });
   });
 
+  describe('when used without TypeScript', () => {
+    beforeEach(() => {
+      fs.realpathSync.mockImplementationOnce(() =>
+        path.join(__dirname, '__mocks__/react-scripts-2-0-0/sub1/sub2')
+      );
+      getReactScriptsPath({ noCache: true });
+    });
+
+    it('should apply styling webpack rules', () => {
+      expect(applyCRAWebpackConfig(mockConfig, '/test-project')).toMatchSnapshot();
+    });
+  });
+
   describe('when used with TypeScript', () => {
-    const rules = getTypeScriptRules(mockRules, './.storybook');
+    beforeEach(() => {
+      fs.realpathSync.mockImplementationOnce(() =>
+        path.join(__dirname, '__mocks__/react-scripts-2-1-0/sub1/sub2')
+      );
+      getReactScriptsPath({ noCache: true });
+    });
 
     it('should return the correct config', () => {
       // Normalise the return, as we know our new rules object will be an array, whereas a string is expected.
+      const rules = getTypeScriptRules(mockRules, './.storybook');
       const rulesObject = { ...rules[0], include: rules[0].include[0] };
       expect(rulesObject).toMatchObject(mockRules[2].oneOf[1]);
     });
 
     // Allows using TypeScript in the `.storybook` (or config) folder.
     it('should add the Storybook config directory to `include`', () => {
+      const rules = getTypeScriptRules(mockRules, './.storybook');
       expect(rules[0].include.findIndex(string => string.includes('.storybook'))).toEqual(1);
     });
+
+    it('should apply Babel and styling webpack rules', () => {
+      expect(applyCRAWebpackConfig(mockConfig, '/test-project')).toMatchSnapshot();
+    });
   });
 });