From a74af1f31d6b6be84350679166eb4a236f1186a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Fri, 18 Feb 2022 05:15:57 +0100
Subject: [PATCH] fix: mock image path as `next/image` expects it (#34350)

The default mock value caused `next/image` to throw an error.

Fixes #33976

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 docs/testing.md                                | 16 +++++++---------
 examples/with-jest-babel/__mocks__/fileMock.js |  7 ++++++-
 examples/with-jest-babel/jest.config.js        |  2 +-
 packages/next/build/jest/__mocks__/fileMock.js |  7 ++++++-
 packages/next/build/jest/jest.ts               |  2 +-
 test/production/next/jest/index.test.ts        |  6 ++++++
 6 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/docs/testing.md b/docs/testing.md
index 6b0bc97e2699b39..6b4bdfaa17ce7c0 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -325,7 +325,7 @@ module.exports = {
 
     // Handle image imports
     // https://jestjs.io/docs/webpack#handling-static-assets
-    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
+    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
 
     // Handle module aliases
     '^@/components/(.*)$': '<rootDir>/components/$1',
@@ -354,7 +354,12 @@ Stylesheets and images aren't used in the tests but importing them may cause err
 
 ```js
 // __mocks__/fileMock.js
-module.exports = 'test-file-stub'
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
 ```
 
 ```js
@@ -362,13 +367,6 @@ module.exports = 'test-file-stub'
 module.exports = {}
 ```
 
-If you're running into the issue `"Failed to parse src "test-file-stub" on 'next/image'"`, add a '/' to your fileMock.
-
-```js
-// __mocks__/fileMock.js
-module.exports = '/test-file-stub'
-```
-
 For more information on handling static assets, please refer to the [Jest Docs](https://jestjs.io/docs/webpack#handling-static-assets).
 
 **Optional: Extend Jest with custom matchers**
diff --git a/examples/with-jest-babel/__mocks__/fileMock.js b/examples/with-jest-babel/__mocks__/fileMock.js
index af027da0507370d..4a271a81f5da059 100644
--- a/examples/with-jest-babel/__mocks__/fileMock.js
+++ b/examples/with-jest-babel/__mocks__/fileMock.js
@@ -1,3 +1,8 @@
 // Read more at "Handling stylesheets and image imports" on https://nextjs.org/docs/testing
 
-module.exports = 'test-file-stub'
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
diff --git a/examples/with-jest-babel/jest.config.js b/examples/with-jest-babel/jest.config.js
index 5a7adbd4d5f9c1e..6351201bf42abcc 100644
--- a/examples/with-jest-babel/jest.config.js
+++ b/examples/with-jest-babel/jest.config.js
@@ -16,7 +16,7 @@ module.exports = {
 
     // Handle image imports
     // https://jestjs.io/docs/webpack#handling-static-assets
-    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
+    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': `<rootDir>/__mocks__/fileMock.js`,
 
     // Handle module aliases
     '^@/components/(.*)$': '<rootDir>/components/$1',
diff --git a/packages/next/build/jest/__mocks__/fileMock.js b/packages/next/build/jest/__mocks__/fileMock.js
index 0e56c5b5f76550e..8761cdaa465285b 100644
--- a/packages/next/build/jest/__mocks__/fileMock.js
+++ b/packages/next/build/jest/__mocks__/fileMock.js
@@ -1 +1,6 @@
-module.exports = 'test-file-stub'
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
diff --git a/packages/next/build/jest/jest.ts b/packages/next/build/jest/jest.ts
index 88fd60b4854bb7c..45733ea25322de4 100644
--- a/packages/next/build/jest/jest.ts
+++ b/packages/next/build/jest/jest.ts
@@ -81,7 +81,7 @@ export default function nextJest(options: { dir?: string } = {}) {
           '^.+\\.(css|sass|scss)$': require.resolve('./__mocks__/styleMock.js'),
 
           // Handle image imports
-          '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': require.resolve(
+          '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': require.resolve(
             `./__mocks__/fileMock.js`
           ),
 
diff --git a/test/production/next/jest/index.test.ts b/test/production/next/jest/index.test.ts
index 6d110b910697735..73265c52fcdbf5b 100644
--- a/test/production/next/jest/index.test.ts
+++ b/test/production/next/jest/index.test.ts
@@ -8,6 +8,8 @@ describe('next/jest', () => {
   beforeAll(async () => {
     next = await createNext({
       files: {
+        'public/vercel.svg':
+          '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"/>',
         'components/comp.js': `
           export default function Comp() {
             return <h1>Hello Dynamic</h1>;
@@ -15,6 +17,8 @@ describe('next/jest', () => {
         `,
         'pages/index.js': `
           import dynamic from "next/dynamic";
+          import Image from "next/image";
+          import img from "../public/vercel.svg";
 
           const Comp = dynamic(() => import("../components/comp"), {
             loading: () => <h1>Loading...</h1>,
@@ -23,6 +27,8 @@ describe('next/jest', () => {
           export default function Page() { 
             return <>
               <Comp />
+              <Image src={img} alt="logo" placeholder="blur"/>
+              <Image src={img} alt="logo 2"/>
               <p>hello world</p>
             </>
           }