fix(next/image): don't call ReactDOM.preload if missing, such as jest (#53443)

balazsorban44 · styfle · web-flow · commit b41497d7631d · 2023-08-08T01:04:40.000Z
### What? `ReactDOM.preload` is available in `react-dom@experimental` builds. If it's not available, we should fall back to `Head`+`link` ### Why? Since `ReactDOM.preload` is only available in `react-dom@experimental` builds, certain environments (like Jest or [Storybook](storybookjs/storybook#23661)) might have a version of `react-dom` installed that won't work with `preload()` ### How? Closes NEXT-1482 Fixes #53272 See also: storybookjs/storybook#23661 Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
diff --git a/packages/next/src/client/image-component.tsx b/packages/next/src/client/image-component.tsx
@@ -320,7 +320,7 @@ function ImagePreload({
     ...getDynamicProps(imgAttributes.fetchPriority),
   }
 
-  if (isAppRouter) {
+  if (isAppRouter && preload) {
     // See https://github.com/facebook/react/pull/26940
     preload(
       imgAttributes.src,
diff --git a/test/production/jest/next-image-preload/app/app/layout.tsx b/test/production/jest/next-image-preload/app/app/layout.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/jest/next-image-preload/app/app/next.svg b/test/production/jest/next-image-preload/app/app/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
diff --git a/test/production/jest/next-image-preload/app/app/page.tsx b/test/production/jest/next-image-preload/app/app/page.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Image from 'next/image'
+import logo from './next.svg'
+
+export default function MyImage() {
+  return <Image alt="" src={logo} priority />
+}
diff --git a/test/production/jest/next-image-preload/app/jest.config.js b/test/production/jest/next-image-preload/app/jest.config.js
@@ -0,0 +1,16 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)
diff --git a/test/production/jest/next-image-preload/next-image-preload.test.ts b/test/production/jest/next-image-preload/next-image-preload.test.ts
@@ -0,0 +1,50 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import path from 'path'
+import execa from 'execa'
+
+const appDir = path.join(__dirname, 'app')
+
+describe('next/jest', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      skipStart: true,
+      files: {
+        app: new FileRef(path.join(appDir, 'app')),
+        [`tests/index.test.tsx`]: `
+        import { render, screen } from '@testing-library/react'
+        import Page from '../app/page'
+
+        it('<Page /> renders', () => {
+          render(<Page />)
+          const logo = screen.getByRole('img')
+          expect(logo).toBeDefined()
+        })
+        `,
+        'jest.config.js': new FileRef(path.join(appDir, 'jest.config.js')),
+      },
+      dependencies: {
+        jest: '29.6.2',
+        'jest-environment-jsdom': '29.6.2',
+        '@testing-library/react': '14.0.0',
+        '@testing-library/jest-dom': '5.17.0',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('Should not throw preload is undefined error', async () => {
+    const { stdout, stderr } = await execa(
+      'pnpm',
+      ['jest', 'tests/index.test.tsx'],
+      {
+        cwd: next.testDir,
+        reject: false,
+      }
+    )
+    // Uncaught [TypeError: (0 , _reactdom.preload) is not a function]
+    expect(stdout + stderr).not.toContain('is not a function')
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -320,7 +320,7 @@ function ImagePreload({`
`320`	`320`	`...getDynamicProps(imgAttributes.fetchPriority),`
`321`	`321`	`}`
`322`	`322`
`323`		`- if (isAppRouter) {`
	`323`	`+ if (isAppRouter && preload) {`
`324`	`324`	`// See https://github.com/facebook/react/pull/26940`
`325`	`325`	`preload(`
`326`	`326`	`imgAttributes.src,`