next/jest tests error when testing next/future/image even when enabled in config

[ornous]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #43-Ubuntu SMP Wed Jun 15 12:54:21 UTC 2022
Binaries:
  Node: 17.9.0
  npm: 8.5.5
  Yarn: 1.22.18
  pnpm: 7.0.1
Relevant packages:
  next: 12.2.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which example does this report relate to?

with-jest

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I've enabled next future image feature but any tests that exercise them fail:

Error: Uncaught [Error: The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.]

The next image component works fine using yarn dev and I even receive this warning when I run my tests before the error:

warn  - You have enabled experimental feature (images) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

Expected Behavior

next/future/image is enabled for my test run if enabled in next config and disabled otherwise

To Reproduce

• Switch next/image in pages/index.tsx to next/future/image
• Enable future image in next.config.js using experimental: { images: { allowFutureImage: true } }
• Add images.domains array in next.config.js
• run pnpm test -- --watchAll

[olaj]

I thought i had the same issue, well kind of had but i realized i had some old code in my jest.setup.ts that was causing this.

process.env = {
  ...process.env,
  //@ts-ignore
  __NEXT_IMAGE_OPTS: {
    deviceSizes: [320, 420, 768, 1024, 1200],
    imageSizes: [20, 40, 60, 70, 200, 400, 440],
    domains: [domain.net"],
    path: "/_next/image/",
    loader: "default",
  },
};

just added the variabel to this

process.env = {
  ...process.env,
  //@ts-ignore
  __NEXT_IMAGE_OPTS: {
    experimentalFuture: true, // Added this
    deviceSizes: [320, 420, 768, 1024, 1200],
    imageSizes: [20, 40, 60, 70, 200, 400, 440],
    domains: [domain.net"],
    path: "/_next/image/",
    loader: "default",
  },
};

And it seems to work, don't remember when i was adding this config but i had a link to #18373 in my code.

Maybe you have the same issue @ornous or someone else ending up here.

[karbica]

I'm also witnessing the same issue. I'm using next/future/image out of the box as documented along with next/jest to configure my jest.config.js. Both 12.2.0 and canary resulted in the same issue. Dumping environment info on canary.

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
    Binaries:
      Node: 16.14.2
      npm: 8.5.0
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.2.3-canary.0
      eslint-config-next: 12.1.6
      react: 18.2.0
      react-dom: 18.2.0

[ornous]

I thought i had the same issue, well kind of had but i realized i had some old code in my jest.setup.ts that was causing this.

process.env = {
  ...process.env,
  //@ts-ignore
  __NEXT_IMAGE_OPTS: {
    deviceSizes: [320, 420, 768, 1024, 1200],
    imageSizes: [20, 40, 60, 70, 200, 400, 440],
    domains: [domain.net"],
    path: "/_next/image/",
    loader: "default",
  },
};

just added the variabel to this

process.env = {
  ...process.env,
  //@ts-ignore
  __NEXT_IMAGE_OPTS: {
    experimentalFuture: true, // Added this
    deviceSizes: [320, 420, 768, 1024, 1200],
    imageSizes: [20, 40, 60, 70, 200, 400, 440],
    domains: [domain.net"],
    path: "/_next/image/",
    loader: "default",
  },
};

And it seems to work, don't remember when i was adding this config but i had a link to #18373 in my code.

Maybe you have the same issue @ornous or someone else ending up here.

Yes @olaj! I'd been trying to assign the object directly to __NEXT_IMAGE_OPTS but it wasn't having any impact. Setting to a new object works for me!

I imagine the next/jest plugin is meant to set these env vars after reading next.config.js and hence the issue should remain open although there is a work around?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.