Monorepo: enable babel-loader and Jest caching (inc. CI) (#49656)

In this PR, we are consolidating babel-loader caching and adding Jest caching, improving build/testing times locally and in CI. The improvement comes from cache covering transpile steps in the mentioned processes.

.github/actions/setup-woocommerce-monorepo/action.yml

@@ -54,6 +54,13 @@ runs:
               path: "${{ env.PNPM_STORE_PATH }}"
               key: "${{ runner.os }}-pnpm-${{ inputs.pull-package-deps }}-${{ hashFiles( 'pnpm-lock.yaml' ) }}"
               restore-keys: '${{ runner.os }}-pnpm-${{ inputs.pull-package-deps }}-'
+        - name: 'Cache: node cache'
+          if: ${{ inputs.pull-package-deps != 'false' }}
+          uses: 'actions/cache@ab5e6d0c87105b4c9c2047343972218f562e4319'
+          with:
+              path: './node_modules/.cache'
+              key: "${{ runner.os }}-node-cache-${{ inputs.pull-package-deps }}-${{ hashFiles( 'pnpm-lock.yaml' ) }}"
+              restore-keys: '${{ runner.os }}-node-cache-${{ inputs.pull-package-deps }}-'
         - name: 'Cache Composer Dependencies'
           if: ${{ inputs.pull-package-deps != 'false' }}
           uses: 'actions/cache@ab5e6d0c87105b4c9c2047343972218f562e4319'

packages/js/internal-js-tests/changelog/dev-babel-loader-jest-caching

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Monorepo: enable Jest caching.

packages/js/internal-js-tests/jest-preset.js

@@ -76,4 +76,8 @@ module.exports = {
 	testEnvironment: 'jest-environment-jsdom',
 	timers: 'modern',
 	verbose: true,
+	cacheDirectory: path.resolve(
+		__dirname,
+		'../../../node_modules/.cache/jest'
+	),
 };

plugins/woo-ai/changelog/dev-babel-loader-jest-caching

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Monorepo: enable Jest caching.

plugins/woo-ai/tests/js/jest.config.js

@@ -17,6 +17,7 @@ module.exports = {
 		'/node_modules/',
 		'<rootDir>/build/',
 		'<rootDir>/.*/build/',
+		'<rootDir>/vendor',
 		'<rootDir>/tests',
 	],
 	transformIgnorePatterns: [

plugins/woocommerce-admin/webpack.config.js

@@ -153,6 +153,11 @@ const webpackConfig = {
 								isHot &&
 								require.resolve( 'react-refresh/babel' ),
 						].filter( Boolean ),
+						cacheDirectory: path.resolve(
+							__dirname,
+							'../../node_modules/.cache/babel-loader'
+						),
+						cacheCompression: false,
 					},
 				},
 			},

plugins/woocommerce-blocks/bin/webpack-configs.js

@@ -103,6 +103,11 @@ const getCoreConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							],
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},
@@ -217,7 +222,11 @@ const getMainConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
-							cacheDirectory: true,
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},
@@ -366,7 +375,11 @@ const getFrontConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
-							cacheDirectory: true,
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},
@@ -484,7 +497,11 @@ const getPaymentsConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
-							cacheDirectory: true,
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},
@@ -591,7 +608,11 @@ const getExtensionsConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
-							cacheDirectory: true,
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},
@@ -674,7 +695,7 @@ const getSiteEditorConfig = ( options = {} ) => {
 					test: /\.(j|t)sx?$/,
 					exclude: /node_modules/,
 					use: {
-						loader: 'babel-loader?cacheDirectory',
+						loader: 'babel-loader',
 						options: {
 							presets: [
 								[
@@ -697,6 +718,11 @@ const getSiteEditorConfig = ( options = {} ) => {
 									: false,
 								'@babel/plugin-proposal-optional-chaining',
 							].filter( Boolean ),
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},
@@ -831,7 +857,7 @@ const getStylingConfig = ( options = {} ) => {
 				{
 					test: /\.(j|t)sx?$/,
 					use: {
-						loader: 'babel-loader?cacheDirectory',
+						loader: 'babel-loader',
 						options: {
 							presets: [ '@wordpress/babel-preset-default' ],
 							plugins: [
@@ -843,6 +869,11 @@ const getStylingConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},
@@ -950,8 +981,6 @@ const getInteractivityAPIConfig = ( options = {} ) => {
 						{
 							loader: require.resolve( 'babel-loader' ),
 							options: {
-								cacheDirectory:
-									process.env.BABEL_CACHE_DIRECTORY || true,
 								babelrc: false,
 								configFile: false,
 								presets: [
@@ -969,6 +998,11 @@ const getInteractivityAPIConfig = ( options = {} ) => {
 									'@babel/plugin-proposal-optional-chaining',
 									'@babel/plugin-proposal-class-properties',
 								],
+								cacheDirectory: path.resolve(
+									__dirname,
+									'../../../node_modules/.cache/babel-loader'
+								),
+								cacheCompression: false,
 							},
 						},
 					],
@@ -1054,7 +1088,11 @@ const getCartAndCheckoutFrontendConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
-							cacheDirectory: true,
+							cacheDirectory: path.resolve(
+								__dirname,
+								'../../../node_modules/.cache/babel-loader'
+							),
+							cacheCompression: false,
 						},
 					},
 				},

plugins/woocommerce-blocks/tests/js/jest.config.json

@@ -45,9 +45,12 @@
 		"<rootDir>/tests/js/setup-after-env.ts"
 	],
 	"testPathIgnorePatterns": [
-		"<rootDir>/tests/",
+		"<rootDir>/bin/",
+		"<rootDir>/build/",
+		"<rootDir>/docs/",
 		"<rootDir>/node_modules/",
-		"<rootDir>/vendor/"
+		"<rootDir>/vendor/",
+		"<rootDir>/tests/"
 	],
 	"transformIgnorePatterns": [ "node_modules/?!(simple-html-tokenizer|is-plain-obj|is-plain-object|memize)" ],
 	"testEnvironment": "jsdom",
@@ -55,5 +58,6 @@
 	"transform": {
 		"^.+\\.(js|ts|tsx)$": "<rootDir>/tests/js/jestPreprocess.js"
 	},
-	"verbose": true
+	"verbose": true,
+	"cacheDirectory": "<rootDir>/../../node_modules/.cache/jest"
 }

plugins/woocommerce/changelog/dev-babel-loader-jest-caching

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Monorepo: enable Jest and babel-loader caching.