Make Jest snapshots stable (#853)

fixtures/braid-design-system/sku.config.js

@@ -1,4 +1,7 @@
-const { ListExternalsWebpackPlugin } = require('@sku-private/test-utils');
+const {
+  ListExternalsWebpackPlugin,
+  makeStableHashes,
+} = require('@sku-private/test-utils');
 
 module.exports = {
   sites: [
@@ -13,9 +16,7 @@ module.exports = {
       config.plugins.push(new ListExternalsWebpackPlugin());
     }
 
-    // Addresses an issue with this specific test suite where module IDs
-    // were different between local dev and CI
-    config.optimization.moduleIds = 'named';
+    makeStableHashes(config);
 
     return config;
   },

fixtures/custom-src-paths/package.json

@@ -7,6 +7,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "dedent": "^0.7.0",
     "sku": "workspace:*"
   }

fixtures/custom-src-paths/sku.config.ts

@@ -1,9 +1,12 @@
 import type { SkuConfig } from 'sku';
+// @ts-ignore no types
+import { makeStableHashes } from '@sku-private/test-utils';
 
 export default {
   srcPaths: ['lib', 'another-folder'],
   clientEntry: 'lib/client.js',
   renderEntry: 'lib/render.js',
   port: 8201,
   publicPath: '/some-static-place',
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 } satisfies SkuConfig;

fixtures/library-build/package.json

@@ -2,6 +2,7 @@
   "name": "@sku-fixtures/library-build",
   "private": true,
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "dedent": "^0.7.0",
     "sku": "workspace:*"
   }

fixtures/library-build/sku.config.js

@@ -1,7 +1,10 @@
+const { makeStableHashes } = require('@sku-private/test-utils');
+
 module.exports = {
   libraryEntry: 'src/library.js',
   renderEntry: 'src/render.js',
   libraryName: 'MyLibrary',
   port: 8085,
   persistentCache: false,
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 };

fixtures/library-file/package.json

@@ -2,6 +2,7 @@
   "name": "@sku-fixtures/library-file",
   "private": true,
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "dedent": "^0.7.0",
     "sku": "workspace:*"
   }

fixtures/library-file/sku.config.js

@@ -1,8 +1,11 @@
+const { makeStableHashes } = require('@sku-private/test-utils');
+
 module.exports = {
   libraryEntry: 'src/library.js',
   renderEntry: 'src/render.js',
   libraryName: 'MyLibrary',
   libraryFile: 'my-library',
   port: 8086,
   persistentCache: false,
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 };

fixtures/multiple-routes/package.json

@@ -7,6 +7,7 @@
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "@testing-library/react": "^14.0.0",
     "dedent": "^0.7.0",
     "sku": "workspace:*"

fixtures/multiple-routes/sku.config.js

@@ -1,3 +1,5 @@
+import { makeStableHashes } from '@sku-private/test-utils';
+
 export default {
   sites: [
     {
@@ -25,5 +27,6 @@ export default {
     'https://error-tracking.com',
     'https://fb-tracking.com',
   ],
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
   skipPackageCompatibilityCompilation: ['react-router-dom'],
 };

fixtures/public-path/package.json

@@ -6,6 +6,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "dedent": "^0.7.0",
     "sku": "workspace:*"
   }

fixtures/public-path/sku.config.js

@@ -1,5 +1,8 @@
-module.exports = {
+import { makeStableHashes } from '@sku-private/test-utils';
+
+export default {
   publicPath: '/static',
   target: 'dist/static',
   port: 4001,
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 };

fixtures/react-css-modules/package.json

@@ -6,6 +6,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "dedent": "^0.7.0",
     "sku": "workspace:*"
   }

fixtures/react-css-modules/sku.config.js

@@ -1,3 +1,6 @@
-module.exports = {
+import { makeStableHashes } from '@sku-private/test-utils';
+
+export default {
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
   setupTests: 'src/setupTests.js',
 };

fixtures/sku-with-https/sku-server.config.js

@@ -1,4 +1,7 @@
-const { ListExternalsWebpackPlugin } = require('@sku-private/test-utils');
+const {
+  ListExternalsWebpackPlugin,
+  makeStableHashes,
+} = require('@sku-private/test-utils');
 
 module.exports = {
   clientEntry: 'src/serverClient.js',
@@ -13,6 +16,8 @@ module.exports = {
       config.plugins.push(new ListExternalsWebpackPlugin());
     }
 
+    makeStableHashes(config);
+
     return config;
   },
 };

fixtures/sku-with-https/sku.config.js

@@ -1,4 +1,7 @@
-const { ListExternalsWebpackPlugin } = require('@sku-private/test-utils');
+const {
+  ListExternalsWebpackPlugin,
+  makeStableHashes,
+} = require('@sku-private/test-utils');
 
 module.exports = {
   port: 9843,
@@ -11,6 +14,8 @@ module.exports = {
       config.plugins.push(new ListExternalsWebpackPlugin());
     }
 
+    makeStableHashes(config);
+
     return config;
   },
 };

fixtures/source-maps/package.json

@@ -6,6 +6,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "dedent": "^0.7.0",
     "sku": "workspace:*"
   }

fixtures/source-maps/sku.config.js

@@ -1,6 +1,9 @@
+const { makeStableHashes } = require('@sku-private/test-utils');
+
 module.exports = {
   publicPath: '/static/source-maps',
   port: 8303,
   target: 'dist',
   sourceMapsProd: true,
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 };

fixtures/ssr-hello-world/package.json

@@ -7,6 +7,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "sku": "workspace:*"
   }
 }

fixtures/ssr-hello-world/sku-build.config.js

@@ -1,3 +1,5 @@
+const { makeStableHashes } = require('@sku-private/test-utils');
+
 module.exports = {
   publicPath: 'http://localhost:4000',
   port: 8000,
@@ -6,4 +8,5 @@ module.exports = {
   public: 'assets',
   cspEnabled: true,
   cspExtraScriptSrcHosts: ['https://some-cdn.com'],
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 };

fixtures/ssr-hello-world/sku-start.config.js

@@ -1,3 +1,5 @@
+const { makeStableHashes } = require('@sku-private/test-utils');
+
 module.exports = {
   publicPath: 'http://localhost:4000',
   port: 8100,
@@ -6,4 +8,5 @@ module.exports = {
   devServerMiddleware: './dev-middleware.js',
   cspEnabled: true,
   cspExtraScriptSrcHosts: ['https://some-cdn.com'],
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 };

fixtures/typescript-css-modules/package.json

@@ -6,6 +6,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
     "@types/react": "^18.2.3",
     "@types/react-dom": "^18.2.3",
     "dedent": "^0.7.0",

fixtures/typescript-css-modules/sku-ssr.config.ts

@@ -1,4 +1,6 @@
 import type { SkuConfig } from 'sku';
+// @ts-ignore no types
+import { makeStableHashes } from '@sku-private/test-utils';
 
 export default {
   clientEntry: 'src/client-ssr.tsx',
@@ -8,4 +10,5 @@ export default {
   // Required for test to serve client assets correctly
   publicPath: 'http://localhost:4003/',
   target: 'dist-ssr',
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 } satisfies SkuConfig;

fixtures/typescript-css-modules/sku.config.ts

@@ -1,4 +1,6 @@
 import type { SkuConfig } from 'sku';
+// @ts-ignore no types
+import { makeStableHashes } from '@sku-private/test-utils';
 
 export default {
   srcPaths: ['src', 'sku-ssr.config.ts'],
@@ -8,4 +10,5 @@ export default {
   publicPath: '/static/typescript',
   setupTests: 'src/setupTests.ts',
   target: 'dist',
+  dangerouslySetWebpackConfig: (config) => makeStableHashes(config),
 } satisfies SkuConfig;

test-utils/index.js

@@ -2,6 +2,7 @@ const { ListExternalsWebpackPlugin } = require('./ListExternalsWebpackPlugin');
 const appSnapshot = require('./appSnapshot');
 const { startAssetServer } = require('./assetServer');
 const { dirContentsToObject } = require('./dirContentsToObject');
+const { makeStableHashes } = require('./skuConfig');
 const {
   getStorybookFrame,
   getTextContentFromStorybookFrame,
@@ -17,6 +18,7 @@ module.exports = {
   dirContentsToObject,
   getStorybookFrame,
   getTextContentFromStorybookFrame,
+  makeStableHashes,
   runSkuScriptInDir,
   spawnSkuScriptInDir,
   waitForUrls,

test-utils/skuConfig.js

@@ -0,0 +1,19 @@
+const makeStableHashes = (config) => {
+  // Addresses an issue where module IDs were different between local dev and CI
+  config.optimization.chunkIds = 'natural';
+  config.optimization.moduleIds = 'natural';
+
+  // Disable hashes
+  if (config.output.filename?.includes('[contenthash]')) {
+    config.output.filename = '[name].js';
+  }
+  if (config.output.chunkFilename?.includes('[contenthash]')) {
+    config.output.chunkFilename = '[name].chunk.js';
+  }
+
+  return config;
+};
+
+module.exports = {
+  makeStableHashes,
+};