From 9c02416edafc0238d9be2ec8d5ceb4c0f36a8b7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Tue, 15 Feb 2022 02:06:04 +0100
Subject: [PATCH 01/13] fix: use valid `src` for `next/image` in `next/jest`
 mock

---
 packages/next/build/jest/__mocks__/fileMock.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/build/jest/__mocks__/fileMock.js b/packages/next/build/jest/__mocks__/fileMock.js
index 0e56c5b5f76550e..d5a4497912fe310 100644
--- a/packages/next/build/jest/__mocks__/fileMock.js
+++ b/packages/next/build/jest/__mocks__/fileMock.js
@@ -1 +1 @@
-module.exports = 'test-file-stub'
+module.exports = '/test-file-stub'

From 641c2f9c4adb887c819de1e201143b21011301e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Tue, 15 Feb 2022 02:07:11 +0100
Subject: [PATCH 02/13] test: img import should be stubbed correctly in
 `next/jest`

---
 test/production/next/jest/index.test.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/test/production/next/jest/index.test.ts b/test/production/next/jest/index.test.ts
index 6d110b910697735..69a79242fe7f0ee 100644
--- a/test/production/next/jest/index.test.ts
+++ b/test/production/next/jest/index.test.ts
@@ -8,6 +8,15 @@ 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/image.js': `
+          import Image from "next/image"
+          import img from "../public/vercel.svg"
+          export function Img() {
+            return <Image src={img} alt="logo" width={24} height={24} />
+          }
+        `,
         'components/comp.js': `
           export default function Comp() {
             return <h1>Hello Dynamic</h1>;
@@ -15,6 +24,7 @@ describe('next/jest', () => {
         `,
         'pages/index.js': `
           import dynamic from "next/dynamic";
+          import { Img } from "../components/image";
 
           const Comp = dynamic(() => import("../components/comp"), {
             loading: () => <h1>Loading...</h1>,
@@ -23,6 +33,7 @@ describe('next/jest', () => {
           export default function Page() { 
             return <>
               <Comp />
+              <Img/>
               <p>hello world</p>
             </>
           } 

From bdf32282b5f811b67b64e768f49d5f1ec1bebdc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 16 Feb 2022 00:49:47 +0100
Subject: [PATCH 03/13] fix: do not check img width and height test

---
 packages/next/client/image.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index a634db7a22dd836..61a717232c2f75f 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -612,7 +612,10 @@ export default function Image({
     }
   } else {
     // <Image src="i.png" />
-    if (process.env.NODE_ENV !== 'production') {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      process.env.NODE_ENV !== 'test'
+    ) {
       throw new Error(
         `Image with src "${src}" must use "width" and "height" properties or "layout='fill'" property.`
       )

From bb3ae263550788843c4e4e2b42ef1befdf224e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 16 Feb 2022 00:50:07 +0100
Subject: [PATCH 04/13] test: use local image without width and height

---
 test/production/next/jest/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/production/next/jest/index.test.ts b/test/production/next/jest/index.test.ts
index 69a79242fe7f0ee..f5e53911f572b7f 100644
--- a/test/production/next/jest/index.test.ts
+++ b/test/production/next/jest/index.test.ts
@@ -14,7 +14,7 @@ describe('next/jest', () => {
           import Image from "next/image"
           import img from "../public/vercel.svg"
           export function Img() {
-            return <Image src={img} alt="logo" width={24} height={24} />
+            return <Image src={img} alt="logo"/>
           }
         `,
         'components/comp.js': `

From 6db1450addd623225a8d6f8f239dcf31bf0b1f5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 16 Feb 2022 02:08:28 +0100
Subject: [PATCH 05/13] fix: match file mock with next-image-loader output

---
 examples/with-jest-babel/__mocks__/fileMock.js | 2 +-
 packages/next/build/jest/__mocks__/fileMock.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/with-jest-babel/__mocks__/fileMock.js b/examples/with-jest-babel/__mocks__/fileMock.js
index af027da0507370d..cf6617db8672fb7 100644
--- a/examples/with-jest-babel/__mocks__/fileMock.js
+++ b/examples/with-jest-babel/__mocks__/fileMock.js
@@ -1,3 +1,3 @@
 // 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 }
diff --git a/packages/next/build/jest/__mocks__/fileMock.js b/packages/next/build/jest/__mocks__/fileMock.js
index d5a4497912fe310..c211176b84a227d 100644
--- a/packages/next/build/jest/__mocks__/fileMock.js
+++ b/packages/next/build/jest/__mocks__/fileMock.js
@@ -1 +1 @@
-module.exports = '/test-file-stub'
+module.exports = { src: '/img.jpg', height: 24, width: 24 }

From 0d8bcdc366a9fef9011c96b6524007583279cce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 16 Feb 2022 02:09:27 +0100
Subject: [PATCH 06/13] chore: update image regex in jest config

---
 docs/testing.md                         | 2 +-
 examples/with-jest-babel/jest.config.js | 2 +-
 packages/next/build/jest/jest.ts        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/testing.md b/docs/testing.md
index 6b0bc97e2699b39..dfd35cb9690aede 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',
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/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`
           ),
 

From 3f38e7a6606470637524ca9780201e4d27410aca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 16 Feb 2022 02:10:31 +0100
Subject: [PATCH 07/13] docs: match next-image-loader mock output

---
 docs/testing.md | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/docs/testing.md b/docs/testing.md
index dfd35cb9690aede..cf8275f5b4fc98a 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -354,7 +354,7 @@ 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 }
 ```
 
 ```js
@@ -362,13 +362,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**

From d81ecc3a457d93aa56d57cd1289621f74d5cecf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 16 Feb 2022 02:11:20 +0100
Subject: [PATCH 08/13] fix: revert usage of NODE_ENV to avoid error

---
 packages/next/client/image.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 61a717232c2f75f..a634db7a22dd836 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -612,10 +612,7 @@ export default function Image({
     }
   } else {
     // <Image src="i.png" />
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      process.env.NODE_ENV !== 'test'
-    ) {
+    if (process.env.NODE_ENV !== 'production') {
       throw new Error(
         `Image with src "${src}" must use "width" and "height" properties or "layout='fill'" property.`
       )

From 79879eb18eec08cfbf63c0413338c3ed755de3c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 16 Feb 2022 02:11:29 +0100
Subject: [PATCH 09/13] test: simplify test

---
 test/production/next/jest/index.test.ts | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/test/production/next/jest/index.test.ts b/test/production/next/jest/index.test.ts
index f5e53911f572b7f..9d65e91b2b79215 100644
--- a/test/production/next/jest/index.test.ts
+++ b/test/production/next/jest/index.test.ts
@@ -10,13 +10,6 @@ describe('next/jest', () => {
       files: {
         'public/vercel.svg':
           '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"/>',
-        'components/image.js': `
-          import Image from "next/image"
-          import img from "../public/vercel.svg"
-          export function Img() {
-            return <Image src={img} alt="logo"/>
-          }
-        `,
         'components/comp.js': `
           export default function Comp() {
             return <h1>Hello Dynamic</h1>;
@@ -24,7 +17,8 @@ describe('next/jest', () => {
         `,
         'pages/index.js': `
           import dynamic from "next/dynamic";
-          import { Img } from "../components/image";
+          import Image from "next/image";
+          import img from "../public/vercel.svg";
 
           const Comp = dynamic(() => import("../components/comp"), {
             loading: () => <h1>Loading...</h1>,
@@ -33,7 +27,7 @@ describe('next/jest', () => {
           export default function Page() { 
             return <>
               <Comp />
-              <Img/>
+              <Image src={img} alt="logo"/>
               <p>hello world</p>
             </>
           } 

From 2c9cc920385d330391a891ba061f910e0c979550 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 03:05:17 +0100
Subject: [PATCH 10/13] fix: mock

---
 examples/with-jest-babel/__mocks__/fileMock.js | 7 ++++++-
 packages/next/build/jest/__mocks__/fileMock.js | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/examples/with-jest-babel/__mocks__/fileMock.js b/examples/with-jest-babel/__mocks__/fileMock.js
index cf6617db8672fb7..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 = { src: '/img.jpg', height: 24, width: 24 }
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
diff --git a/packages/next/build/jest/__mocks__/fileMock.js b/packages/next/build/jest/__mocks__/fileMock.js
index c211176b84a227d..8761cdaa465285b 100644
--- a/packages/next/build/jest/__mocks__/fileMock.js
+++ b/packages/next/build/jest/__mocks__/fileMock.js
@@ -1 +1,6 @@
-module.exports = { src: '/img.jpg', height: 24, width: 24 }
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}

From 2b3f337a061b78dbe20d3f9c55406af2035e7f22 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 03:05:48 +0100
Subject: [PATCH 11/13] test: add `placeceholder="blur"` test

---
 test/production/next/jest/index.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/production/next/jest/index.test.ts b/test/production/next/jest/index.test.ts
index 9d65e91b2b79215..73265c52fcdbf5b 100644
--- a/test/production/next/jest/index.test.ts
+++ b/test/production/next/jest/index.test.ts
@@ -27,7 +27,8 @@ describe('next/jest', () => {
           export default function Page() { 
             return <>
               <Comp />
-              <Image src={img} alt="logo"/>
+              <Image src={img} alt="logo" placeholder="blur"/>
+              <Image src={img} alt="logo 2"/>
               <p>hello world</p>
             </>
           } 

From 3258d75e87c0789b766dcfe0a445e9dbd550cd7a 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 04:39:41 +0100
Subject: [PATCH 12/13] Update docs/testing.md

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 docs/testing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/testing.md b/docs/testing.md
index cf8275f5b4fc98a..523959ba013a1f0 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -354,7 +354,7 @@ Stylesheets and images aren't used in the tests but importing them may cause err
 
 ```js
 // __mocks__/fileMock.js
-module.exports = { src: '/img.jpg', height: 24, width: 24 }
+module.exports = { src: '/img.jpg', height: 24, width: 24, blurDataURL: 'data:image/png;base64,imagedata' }
 ```
 
 ```js

From 3c1515953d808a1296dd6d1e06e2f1d6ace4d888 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 04:41:19 +0100
Subject: [PATCH 13/13] Update testing.md

---
 docs/testing.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/testing.md b/docs/testing.md
index 523959ba013a1f0..6b4bdfaa17ce7c0 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -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 = { src: '/img.jpg', height: 24, width: 24, blurDataURL: 'data:image/png;base64,imagedata' }
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
 ```
 
 ```js