mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
6aa3dbd2e8
- 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 --------- Co-authored-by: Steven <[email protected]>
12 lines
219 B
JavaScript
12 lines
219 B
JavaScript
const nextJest = require('next/jest')
|
|
|
|
const createJestConfig = nextJest({
|
|
dir: './',
|
|
})
|
|
|
|
const customJestConfig = {
|
|
testEnvironment: 'jest-environment-jsdom',
|
|
}
|
|
|
|
module.exports = createJestConfig(customJestConfig)
|