Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Ignored next.config images.qualities inside tests [1 pull requests, 6 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#89492•Fetched 2026-04-08 02:02:50
View on GitHub
Comments
6
Participants
3
Timeline
24
Reactions
1
Author
PierreNollPierreNoll
Participants
github-actions[bot]github-actions[bot]PierreNollPierreNollrishishanbhagrishishanbhag
Timeline (top)
commented ×6mentioned ×5subscribed ×5labeled ×3

Error Message

console.warn

Fix Action

Fixed

PR fix notes

PR #89536: Fix: Image component ignores images.qualities in Jest environment

Description (problem / solution / changelog)

  • Fixes #89492
  • Fixes #18415

Problem

When testing Next.js <Image /> components with Jest, custom images.qualities configured in next.config.js are ignored, causing:

  • Image URLs to use default quality (q=75) instead of configured values
  • Warning: "Image with src ... is using quality X which is not configured in images.qualities [75]"

Root Cause

In production and development, Next.js uses webpack's DefinePlugin to inject the image configuration via process.env.__NEXT_IMAGE_OPTS. However, Jest tests don't use webpack, so process.env.__NEXT_IMAGE_OPTS is undefined, causing the Image component to fall back to default configuration.

Solution

This PR implements a two-part fix:

  1. Jest globals population (packages/next/src/build/jest/jest.ts):

    • Expose nextConfig.images via Jest globals.__NEXT_IMAGE_OPTS

  2. Runtime fallback (image components):

    • When process.env.__NEXT_IMAGE_OPTS is undefined, fall back to globalThis.__NEXT_IMAGE_OPTS
    • Applied to:
      • packages/next/src/client/image-component.tsx
      • packages/next/src/shared/lib/image-external.tsx
      • packages/next/src/client/legacy/image.tsx

Changes

  • ✅ Minimal, targeted fix (4 files, ~40 lines)
  • ✅ No production/development behavior changes
  • ✅ No test-only conditionals or environment checks
  • ✅ Comprehensive test coverage added

Testing

Added test in test/production/app-dir/image-jest-qualities/ that:

  • Configures custom qualities [90, 100] in next.config.js
  • Renders <Image quality={100} /> in Jest with jsdom
  • Asserts generated image URLs contain q=100 not q=75

Test correctly fails on canary (shows warning about unconfigured quality) and passes with fix.

Verification

  • ✅ New test passes with fix
  • ✅ Existing image tests unaffected
  • ✅ Addresses original issue reproduction exactly

Changed files

  • packages/next/src/build/jest/jest.ts (modified, +32/-2)
  • packages/next/src/build/swc/jest-transformer.ts (modified, +2/-0)
  • packages/next/src/build/swc/options.ts (modified, +16/-1)
  • test/production/app-dir/image-jest-qualities/app/app/page.tsx (added, +8/-0)
  • test/production/app-dir/image-jest-qualities/app/jest.config.js (added, +11/-0)
  • test/production/app-dir/image-jest-qualities/app/next.config.js (added, +5/-0)
  • test/production/app-dir/image-jest-qualities/image-jest-qualities.test.ts (added, +114/-0)

Code Example

# see "shared Terminal"
pnpm run test image

---

# see "shared Terminal"
pnpm run test image

# react output
  console.warn
    Image with src "/favicon.ico" is using quality "100" which is not configured in images.qualities [75]. Please update your config to [100, 75].
    Read more: https://nextjs.org/docs/messages/next-image-unconfigured-qualities
...
# jest outputs
    expect(element).toHaveAttribute("src", StringContaining "q=100") // element.getAttribute("src") === StringContaining "q=100"
...
    Expected the element to have attribute:
      src=StringContaining "q=100"
    Received:
      src="/_next/image?url=%2Ffavicon.ico&w=1080&q=75"

---

<img alt="Picture of the author" loading="lazy" width="500" height="500" decoding="async" data-nimg="1" style="color:transparent" srcset="/_next/image?url=%2Ffavicon.ico&amp;w=640&amp;q=100 1x, /_next/image?url=%2Ffavicon.ico&amp;w=1080&amp;q=100 2x" src="/_next/image?url=%2Ffavicon.ico&amp;w=1080&amp;q=100">

---

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.2.0-canary.26 // Latest available version is detected (16.2.0-canary.26).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/xenodochial-moore-zfvlts?workspaceId=ws_DcrNK8e2oJ5741YQkNZbim

To Reproduce

  1. Open https://codesandbox.io/p/devbox/xenodochial-moore-zfvlts?workspaceId=ws_DcrNK8e2oJ5741YQkNZbim
  2. run
# see "shared Terminal"
pnpm run test image

Current vs. Expected behavior

Output below can be seen in "Shared Terminal" on the codesandbox repro. It runs the test for ./app/image.test.tsx, corresponding to the ./app/image.tsx Image component. Code have been copied directly from https://github.com/vercel/next.js/blob/canary/examples/with-jest/. We expect to have a quality of 100 in the src attribute of the <img> since the prop quality value is 100 and since it is a quality listed in next.config.js.

# see "shared Terminal"
pnpm run test image

# react output
  console.warn
    Image with src "/favicon.ico" is using quality "100" which is not configured in images.qualities [75]. Please update your config to [100, 75].
    Read more: https://nextjs.org/docs/messages/next-image-unconfigured-qualities
...
# jest outputs
    expect(element).toHaveAttribute("src", StringContaining "q=100") // element.getAttribute("src") === StringContaining "q=100"
...
    Expected the element to have attribute:
      src=StringContaining "q=100"
    Received:
      src="/_next/image?url=%2Ffavicon.ico&w=1080&q=75"

NB: the issue is not about the Image when running the app (next dev) as we can see below, in this case the quality parameter is correct in this case.

<img alt="Picture of the author" loading="lazy" width="500" height="500" decoding="async" data-nimg="1" style="color:transparent" srcset="/_next/image?url=%2Ffavicon.ico&amp;w=640&amp;q=100 1x, /_next/image?url=%2Ffavicon.ico&amp;w=1080&amp;q=100 2x" src="/_next/image?url=%2Ffavicon.ico&amp;w=1080&amp;q=100">

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.2.0-canary.26 // Latest available version is detected (16.2.0-canary.26).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image (next/image), Testing

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

No response

extent analysis

TL;DR

Update the next.config.js file to include the quality value of 100 in the images.qualities configuration.

Guidance

  • The issue is caused by a mismatch between the quality value used in the Image component and the qualities configured in next.config.js.
  • To fix the issue, update the next.config.js file to include the quality value of 100 in the images.qualities configuration, like this: images: { qualities: [100, 75] }.
  • Verify that the fix worked by running the test again and checking that the warning message is no longer displayed.
  • Make sure to update the next.config.js file in the correct location, as the change needs to be applied to the production environment.

Notes

  • The issue only occurs when running the test, not when running the app in development mode.
  • The next.config.js file needs to be updated to include the quality value of 100 in the images.qualities configuration.

Recommendation

  • Apply workaround: Update the next.config.js file to include the quality value of 100 in the images.qualities configuration. This will fix the issue and allow the test to pass.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#retriever error#indexing error#inference speed#output truncation#response parsing

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix Ignored next.config images.qualities inside tests [1 pull requests, 6 comments, 3 participants]