build: update jest and all associated packages

jest.config.js

@@ -9,4 +9,9 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   testPathIgnorePatterns: ['/node_modules/'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+  // output snapshots to match pre-Jest-29 format
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true
+  },
 }

package.json

@@ -55,26 +55,28 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.4",
     "@types/babel__traverse": "7.11.1",
+    "@types/jest": "^29.5.5",
     "@types/node": "^10.12.26",
     "@types/react": "^17.0.2",
     "@typescript-eslint/parser": "^6.7.3",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.0.4",
     "check-engine": "^1.10.1",
     "css-loader": "^3.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-webpack": "^0.12.0",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint": "^8.50.0",
+    "eslint-import-resolver-webpack": "^0.13.7",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^27.4.0",
     "husky": "^4.0.0",
-    "jest": "^27.5.1",
-    "jest-environment-jsdom": "^27.5.1",
-    "jest-puppeteer": "^5.0.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-enzyme": "^7.1.2",
+    "jest-puppeteer": "^9.0.0",
     "lint-staged": "^10.0.0",
     "morphdom": "^2.7.0",
     "n-ui-foundations": "9.0.0",
     "prettier": "^2.0.2",
-    "puppeteer": "^3.0.0",
+    "puppeteer": "^21.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
@@ -83,7 +85,7 @@
     "sass-loader": "^10.5.2",
     "style-loader": "^1.0.0",
     "supertest": "^4.0.2",
-    "ts-jest": "^26.0.0",
+    "ts-jest": "^29.1.1",
     "typescript": "^5.2.2"
   },
   "engines": {

packages/dotcom-build-images/src/index.ts

@@ -18,18 +18,24 @@ export class PageKitImagesPlugin {
       cwd: path.resolve(this.options.basePath)
     })
 
-    for(const imageFile of imageFiles) {
+    for (const imageFile of imageFiles) {
       new EntryPlugin(compiler.context, imageFile, '__images__').apply(compiler)
     }
 
     const isDevMode = compiler.options.mode === 'development'
-    const outputFileName = isDevMode ? '[name].[ext]' : '[name].[contenthash:12].[ext]'
+    const outputFileName = isDevMode ? '[name][ext]' : '[name].[contenthash:12][ext]'
 
     compiler.options.module.rules.push({
       test: /\.(png|jpe?g|gif|webp|ico|svg)$/,
       type: 'asset/resource',
       generator: {
-        filename: outputFileName
+        filename: (pathInfo) => {
+          const dirname = path.dirname(pathInfo.module.resource)
+          const relativePath = path.relative(this.options.basePath, dirname)
+
+          // retain relative directory structure
+          return path.join(relativePath, outputFileName)
+        }
       }
     })
   }