Skip to content

Commit

Permalink
[LOOM-1328]: Add test suite for backpack-addons/splitChunks remove un…
Browse files Browse the repository at this point in the history
…stable 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
  • Loading branch information
mungodewar authored Mar 26, 2024
1 parent 4e98f84 commit 98a04cb
Showing 5 changed files with 82 additions and 3 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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 .",
4 changes: 3 additions & 1 deletion packages/react-scripts/backpack-addons/README.md
Original file line number Diff line number Diff line change
@@ -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

4 changes: 2 additions & 2 deletions packages/react-scripts/backpack-addons/splitChunks.js
Original file line number Diff line number Diff line change
@@ -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 = {};
}
74 changes: 74 additions & 0 deletions packages/react-scripts/backpack-addons/splitChunks.test.js
Original file line number Diff line number Diff line change
@@ -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\//,
},
},
},
});
});
});

0 comments on commit 98a04cb

Please sign in to comment.