16.2 Jest tests fail when using a custom image loader
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/guisehn/next-16.2-jest-bug-mre
To Reproduce
-
Configure your
next.config.jswith a custom loader by usingloaderandloaderFile(docs) -
Use
npm run testto run a Jest test that renders anext/image -
It will crash with:
Image with src "/images/test.jpg" is missing "loader" prop.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader
Current vs. Expected behavior
Currently: crashing with error Image with src "/images/test.jpg" is missing "loader" prop.
Expected: not crash, because loaderFile was supplied in next.config.js.
This error should only happen when using loader = custom but not having a loaderFile. In that case, passing a loader prop to next/image is required.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:31:00 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6020
Available memory (MB): 32768
Available CPU cores: 12
Binaries:
Node: 22.1.0
npm: 10.7.0
Yarn: 1.22.22
pnpm: 10.16.1
Relevant Packages:
next: 16.2.1 // Latest available version is detected (16.2.1).
eslint-config-next: N/A
react: 18.3.1
react-dom: 18.3.1
typescript: 5.3.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Testing
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
Issue started happening on Next.js 16.2. Tested and it works fine on 16.1.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction repository and its next.config.js, then run npm run test to observe the next/image failure with loader and loaderFile configured. Trace the Jest image-rendering path and add or update a regression test; done means a configured loaderFile prevents the missing-loader error while a custom loader without one still requires a loader prop.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100