[LOOM-1328]: Add test suite for backpack-addons/splitChunks remove unstable from backpack chunk config (#185)

* add tests for splitChunks addon & remove unstable from backpack chunk config

* move where addon tests are executed

* add docs for new config

Author: mungodewar

.github/workflows/build.yml

@@ -21,3 +21,5 @@ jobs:
         run: npm ci --prefer-offline
       - name: Build
         run: npm run build
+      - name: Run addon tests
+        run: npm run test:addons

package.json

@@ -17,6 +17,7 @@
     "screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
     "alex": "alex .",
     "test:integration": "jest test/integration",
+    "test:addons": "jest packages/react-scripts/backpack-addons",
     "test": "cd packages/react-scripts && node bin/react-scripts.js test",
     "eslint": "eslint .",
     "prettier": "prettier .",

packages/react-scripts/backpack-addons/README.md

@@ -14,7 +14,9 @@ Our react scripts fork includes a number of custom configuration items in order
 | **ssrExternals**            | The same as above `externals` except used for server side rendering only in **ssr.js**                                                                                                                                                                                                                                                                                                                                                        | **{}**                                                                                                                                          |
 | **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching.                                                                                 | **false**                                                                                                                                       |
 | **vendorsChunkRegex**       | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details.                                                                                                                                                                                                               |                                                                                                                                                 |
-| **splitChunksConfig**       | Object, mapping to the [structure in the webpack docs](https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks).<br> Applied only if `enableAutomaticChunking` is false, ignores `vendorsChunkRegex` if defined.                                                                                                                                                                                                          |                                                                                                                                                 |
+| **splitChunksConfig**       | Object, mapping to the [structure in the webpack docs](https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks).<br> Applied only if `enableAutomaticChunking` is false, ignores `vendorsChunkRegex` if defined.                                                                                                                                                                                                          |
+| **enableBpkStylesChunk**       | Boolean, when enabled will create a single chunk for all Backpack CSS.                                                                                                                                                                                                          | false                                                                                                                                                |
+
 
 ## How to add new feature
 

packages/react-scripts/backpack-addons/splitChunks.js

@@ -57,7 +57,7 @@ const backpackStylesCacheGroup = {
   chunks: 'all',
   enforce: true,
   test: /[\\/]node_modules[\\/]@skyscanner[\\/]backpack-web[\\/]/,
-  priority: 1
+  priority: 1,
 };
 
 module.exports = () => {
@@ -94,7 +94,7 @@ module.exports = () => {
     }
   }
 
-  if (bpkReactScriptsConfig.__unstableEnableBpkStylesChunk) {
+  if (bpkReactScriptsConfig.enableBpkStylesChunk) {
     if (!splitChunksConfig.cacheGroups) {
       splitChunksConfig.cacheGroups = {};
     }

packages/react-scripts/backpack-addons/splitChunks.test.js

@@ -0,0 +1,74 @@
+'use strict';
+
+let mockPackageJson = {};
+
+jest.mock('../package.json', () => ({
+  'backpack-react-scripts': mockPackageJson,
+}));
+
+describe('splitChunks addon', () => {
+  let splitChunks;
+  beforeEach(() => {
+    mockPackageJson = {};
+    jest.isolateModules(() => {
+      splitChunks = require('./splitChunks');
+    });
+  });
+
+  it('by default is {}', () => {
+    expect(splitChunks()).toEqual({ splitChunks: {} });
+  });
+
+  it('enableBpkStylesChunk should define a bpkStyles cache group', () => {
+    mockPackageJson.enableBpkStylesChunk = true;
+    expect(splitChunks().splitChunks.cacheGroups.bpkStyles).toBeDefined();
+  });
+
+  it('enableAutomaticChunking should add chunks: all and have an empty cacheGroups', () => {
+    mockPackageJson.enableAutomaticChunking = true;
+    expect(splitChunks()).toEqual({
+      splitChunks: {
+        chunks: 'all',
+        cacheGroups: {},
+      },
+    });
+  });
+
+  it('enableAutomaticChunking & vendorsChunkRegex should add chunks: all and have a user customised cacheGroup', () => {
+    mockPackageJson.enableAutomaticChunking = true;
+    mockPackageJson.vendorsChunkRegex =
+      '[\\/]node_modules[\\/]((?!bpk-.*?)(?!@skyscanner.*?).*?)[\\/]';
+    expect(splitChunks()).toEqual({
+      splitChunks: {
+        chunks: 'all',
+        cacheGroups: {
+          defaultVendors: {
+            test: new RegExp(mockPackageJson.vendorsChunkRegex),
+          },
+        },
+      },
+    });
+  });
+
+  it('splitChunksConfig should allow custom cache groups to be defined by users', () => {
+    mockPackageJson.splitChunksConfig = {
+      chunks: 'async',
+      cacheGroups: {
+        myCacheGroup: {
+          test: '/myModule/',
+        },
+      },
+    };
+
+    expect(splitChunks()).toEqual({
+      splitChunks: {
+        chunks: 'async',
+        cacheGroups: {
+          myCacheGroup: {
+            test: /\/myModule\//,
+          },
+        },
+      },
+    });
+  });
+});