From 98a04cbed8a1ac01f17f7b04d0abc255757b6be1 Mon Sep 17 00:00:00 2001
From: mungodewar <89925955+mungodewar@users.noreply.github.com>
Date: Tue, 26 Mar 2024 15:58:54 +0000
Subject: [PATCH] [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
---
.github/workflows/build.yml | 2 +
package.json | 1 +
.../react-scripts/backpack-addons/README.md | 4 +-
.../backpack-addons/splitChunks.js | 4 +-
.../backpack-addons/splitChunks.test.js | 74 +++++++++++++++++++
5 files changed, 82 insertions(+), 3 deletions(-)
create mode 100644 packages/react-scripts/backpack-addons/splitChunks.test.js
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index d6d136b77b..1d1f4d3d19 100644
--- a/.github/workflows/build.yml
+++ b/.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
diff --git a/package.json b/package.json
index 760c0af84f..705355fffb 100644
--- a/package.json
+++ b/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 .",
diff --git a/packages/react-scripts/backpack-addons/README.md b/packages/react-scripts/backpack-addons/README.md
index 4c752efa1c..6f0b01d2db 100644
--- a/packages/react-scripts/backpack-addons/README.md
+++ b/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.
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.
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.
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).
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).
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
diff --git a/packages/react-scripts/backpack-addons/splitChunks.js b/packages/react-scripts/backpack-addons/splitChunks.js
index e7f75d6660..0a2d210b68 100644
--- a/packages/react-scripts/backpack-addons/splitChunks.js
+++ b/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 = {};
}
diff --git a/packages/react-scripts/backpack-addons/splitChunks.test.js b/packages/react-scripts/backpack-addons/splitChunks.test.js
new file mode 100644
index 0000000000..94a5c08ac5
--- /dev/null
+++ b/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\//,
+ },
+ },
+ },
+ });
+ });
+});