Skip to content

Ignored next.config images.qualities inside tests #89492

@PierreNoll

Description

@PierreNoll

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Image (next/image)Related to Next.js Image Optimization.TestingRelated to testing with Next.js.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions