-
Notifications
You must be signed in to change notification settings - Fork 30.4k
Open
Labels
Image (next/image)Related to Next.js Image Optimization.Related to Next.js Image Optimization.TestingRelated to testing with Next.js.Related to testing with Next.js.
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/xenodochial-moore-zfvlts?workspaceId=ws_DcrNK8e2oJ5741YQkNZbim
To Reproduce
- Open https://codesandbox.io/p/devbox/xenodochial-moore-zfvlts?workspaceId=ws_DcrNK8e2oJ5741YQkNZbim
- run
# see "shared Terminal"
pnpm run test imageCurrent 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&w=640&q=100 1x, /_next/image?url=%2Ffavicon.ico&w=1080&q=100 2x" src="/_next/image?url=%2Ffavicon.ico&w=1080&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/AWhich 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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Image (next/image)Related to Next.js Image Optimization.Related to Next.js Image Optimization.TestingRelated to testing with Next.js.Related to testing with Next.js.