From e05a95a844021b00d9a063ce5ba6e5c28a9c09cc Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Tue, 10 May 2022 16:36:10 -0500
Subject: [PATCH] Update moduleNameMapper jest config and remove extra deps
 (#36787)

* Update moduleNameMapper jest config and remove extra deps

* move svg mock to its own entry for easier overriding

* remove package script
---
 examples/with-jest/package.json  |  5 -----
 packages/next/build/jest/jest.ts | 14 +++++++++-----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json
index 23e5d9ed94c85..c637cdf07f343 100644
--- a/examples/with-jest/package.json
+++ b/examples/with-jest/package.json
@@ -2,7 +2,6 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "lint": "next lint",
     "build": "next build",
     "start": "next start",
     "test": "jest --watch",
@@ -18,10 +17,6 @@
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
     "@types/react": "17.0.38",
-    "babel-jest": "27.4.5",
-    "eslint": "8.5.0",
-    "eslint-config-next": "latest",
-    "eslint-plugin-testing-library": "5.0.1",
     "jest": "27.4.5",
     "typescript": "4.5.4"
   }
diff --git a/packages/next/build/jest/jest.ts b/packages/next/build/jest/jest.ts
index ab3108d792daa..256e11beb36cb 100644
--- a/packages/next/build/jest/jest.ts
+++ b/packages/next/build/jest/jest.ts
@@ -76,10 +76,6 @@ export default function nextJest(options: { dir?: string } = {}) {
         ...resolvedJestConfig,
 
         moduleNameMapper: {
-          // Custom config will be able to override the default mappings
-          // moduleNameMapper is matched top to bottom hence why this has to be before Next.js internal rules
-          ...(resolvedJestConfig.moduleNameMapper || {}),
-
           // Handle CSS imports (with CSS modules)
           // https://jestjs.io/docs/webpack#mocking-css-modules
           '^.+\\.module\\.(css|sass|scss)$':
@@ -89,9 +85,17 @@ export default function nextJest(options: { dir?: string } = {}) {
           '^.+\\.(css|sass|scss)$': require.resolve('./__mocks__/styleMock.js'),
 
           // Handle image imports
-          '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': require.resolve(
+          '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$': require.resolve(
             `./__mocks__/fileMock.js`
           ),
+
+          // Keep .svg to it's own rule to make overriding easy
+          '^.+\\.(svg)$': require.resolve(`./__mocks__/fileMock.js`),
+
+          // custom config comes last to ensure the above rules are matched,
+          // fixes the case where @pages/(.*) -> src/pages/$! doesn't break
+          // CSS/image mocks
+          ...(resolvedJestConfig.moduleNameMapper || {}),
         },
         testPathIgnorePatterns: [
           // Don't look for tests in node_modules