Hostname is not configured under images in your `next.config.js` when running tests with Jest

[AustinShelby]

What version of Next.js are you using?

10.0.2

What version of Node.js are you using?

14.2.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

How are you deploying your application?

next start

Describe the Bug

When using Jest to test a component that uses Image from next/image you will get an error that your src prop hostname is not configured under images in your next.config.js even if you have mocked the config to include the domain.

Expected Behavior

Jest mocking should work.

To Reproduce

Testing this component:

import React from "react";
import Image from "next/image";

export const Github: React.FC = () => {
  return (
    <div>
      <Image
        width={800}
        height={600}
        sizes="600px"
        layout="responsive"
        objectFit="cover"
        src={`${process.env.NEXT_PUBLIC_CDN_URL}/hello.jpg`}
      />
      Hello World
    </div>
  );
};

with this test:

import React from "react";
import { screen, render, waitFor } from "@testing-library/react";
import { Github } from "../../../../components/github";

jest.mock("next/config", () => {
  return () => ({
    publicRuntimeConfig: {
      images: {
        domains: ["cdn.example.com"],
      },
    },
  });
});

describe("github issue reproduction", () => {
  jest.useFakeTimers("modern");
  jest.setSystemTime(new Date(2021, 1, 20, 12, 0, 0, 0));

  it("github issue", async () => {
    render(<Github />);

    await waitFor(() =>
      expect(screen.getByText("Hello World")).toBeInTheDocument()
    );
  });
});

with this jest.config.js:

module.exports = {
  moduleNameMapper: {
    "\\.(css|less)$": "identity-obj-proxy",
  },
  setupFiles: ["<rootDir>/__tests__/setupEnvironment.js"],
};

with this setupEnvironment.js:

process.env.NEXT_PUBLIC_CDN_URL = "https://cdn.example.com";

will get you this error:

    Invalid src prop (https://cdn.example.com/hello.jpg) on `next/image`, hostname "cdn.example.com" is not configured under images in your `next.config.js`
    See more info: https://err.sh/next.js/next-image-unconfigured-host

      20 |     render(<Github />);
      21 | 
    > 22 |     await waitFor(() =>
         |           ^
      23 |       expect(screen.getByText("Hello World")).toBeInTheDocument()
      24 |     );
      25 |   });

[AustinShelby]

I managed to find a workaround to get the test passing mocking next/image like this:

jest.mock("next/image", () => {
  return () => <></>;
});

but obviously, it's not a great solution if you test the Image element in any way.

[kevinseabourne]

I used this solution

jest.mock("next/image", () => ({ src, alt }) => <img src={src} alt={alt} />)

[marnixhoh]

I'm having the exact same problem. Obviously mocking next/image is a workaround, but I'd rather keep the original implementation...

The related Storybook issue for those who landed here looking for that one: #18393

[SocialBrothersDEV]

We are experiencing the same since NextJS version 10.1.0

[jflayhart]

found another workaround for Jest specs 😂 see #23590 (comment)

beforeEach(() => {
  process.env.NODE_ENV = 'production'
})

afterEach(() => {
  process.env.NODE_ENV = 'test'
})

[william-hotmart]

Same problem here using NextJS version 10.2.0

[votemike]

Example repo here: https://github.com/votemike/21549 with clean commits.
git clone git@github.com:votemike/21549.git && cd 21549 && yarn install && yarn test

[bcomnes]

I fixed this by adding the following config to jest:

// jest.setup.js
// Fix next img in test env
// https://github.com/vercel/next.js/issues/18393#issuecomment-783269086
import * as NextImage from 'next/image'
const OriginalNextImage = NextImage.default
Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />
})

In my jest config:

// jest.config.js
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js']
}

This way I get Image warnings in my tests