Next.js: Unable to test components that import "next/image"

[spencewood]

Bug report

Describe the bug

Using jest and react-testing-library, tests that run on components that use the new Image component fail with the following error:

    TypeError: Cannot destructure property 'deviceSizes' of 'imageData' as it is undefined.

    > 1 | import Image from "next/image";
        | ^
      2 | 

To Reproduce

As far as my testing has gone just simply running a test against any component that imports Image from "next/image" causes this error. I've setup a simple vanilla nextjs repo that adds jest and react-testing-library, along with a component that uses the Image component here: https://github.com/spencewood/next-image-test. Running the tests on this repo yields the above error:

> yarn test

Expected behavior

I would expect the tests to run normally.

System information

• OS: macOS 10.15
• Version of Next.js: 10.0
• Version of Node.js: 12.18

[georgekaran]

Same problem here, as a work-around I've done the same as in this discussion https://github.com/vercel/next.js/discussions/18373#discussioncomment-114212

I've managed to create a work-around by adding the following process.env in a Jest setupFile:

process.env = {
    ...process.env,
    __NEXT_IMAGE_OPTS: {
        deviceSizes: [320, 420, 768, 1024, 1200],
        imageSizes: [],
        domains: ['images.example.com'],
        path: '/_next/image',
        loader: 'default',
    },
};

Just remember to add your specific domains to the domains list.