From 65264effb248fee04ef63482e5a486300362a26a Mon Sep 17 00:00:00 2001
From: sung-oh-park <sung-oh.park@navercorp.com>
Date: Sat, 14 May 2022 15:52:55 +0900
Subject: [PATCH] feat: split fileMock into several dedicated mock files

---
 packages/next/build/jest/__mocks__/fileMock.js  |  8 ++------
 packages/next/build/jest/__mocks__/imageMock.js |  7 +++++++
 packages/next/build/jest/__mocks__/svgMock.js   | 11 +++++++++++
 packages/next/build/jest/jest.ts                | 12 ++++++++----
 4 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 packages/next/build/jest/__mocks__/imageMock.js
 create mode 100644 packages/next/build/jest/__mocks__/svgMock.js

diff --git a/packages/next/build/jest/__mocks__/fileMock.js b/packages/next/build/jest/__mocks__/fileMock.js
index 8761cdaa46528..156de12817d34 100644
--- a/packages/next/build/jest/__mocks__/fileMock.js
+++ b/packages/next/build/jest/__mocks__/fileMock.js
@@ -1,6 +1,2 @@
-module.exports = {
-  src: '/img.jpg',
-  height: 24,
-  width: 24,
-  blurDataURL: 'data:image/png;base64,imagedata',
-}
+// as jest suggested in https://jestjs.io/docs/webpack#handling-static-assets
+module.exports = 'test-file-stub'
diff --git a/packages/next/build/jest/__mocks__/imageMock.js b/packages/next/build/jest/__mocks__/imageMock.js
new file mode 100644
index 0000000000000..fee4f0b5212ff
--- /dev/null
+++ b/packages/next/build/jest/__mocks__/imageMock.js
@@ -0,0 +1,7 @@
+// mock StaticImageData interface
+module.exports = {
+  src: '/mock-image.png',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
diff --git a/packages/next/build/jest/__mocks__/svgMock.js b/packages/next/build/jest/__mocks__/svgMock.js
new file mode 100644
index 0000000000000..1fd9fd88c80da
--- /dev/null
+++ b/packages/next/build/jest/__mocks__/svgMock.js
@@ -0,0 +1,11 @@
+const React = require('react')
+
+// mock @svgr/webpack
+module.exports = (...props) => {
+  const svg = React.createElement('svg', {
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    ...props[0],
+  })
+  return svg
+}
diff --git a/packages/next/build/jest/jest.ts b/packages/next/build/jest/jest.ts
index 844afc8e22308..287607e46f56e 100644
--- a/packages/next/build/jest/jest.ts
+++ b/packages/next/build/jest/jest.ts
@@ -92,13 +92,17 @@ export default function nextJest(options: { dir?: string } = {}) {
           // Handle CSS imports (without CSS modules)
           '^.+\\.(css|sass|scss)$': require.resolve('./__mocks__/styleMock.js'),
 
-          // Handle image imports
+          // Handle image imports as a StaticImageData-typed png image
           '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$': require.resolve(
-            `./__mocks__/fileMock.js`
+            `./__mocks__/imageMock.js`
           ),
 
-          // Keep .svg to it's own rule to make overriding easy
-          '^.+\\.(svg)$': require.resolve(`./__mocks__/fileMock.js`),
+          // Handle svg imports as @svgr/webpack plugin handles
+          '^.+\\.(svg)$': require.resolve(`./__mocks__/svgMock.js`),
+
+          // Handle other files as jest suggested
+          '^.+\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+            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