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

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,

test/production/jest/next-image-preload/app/app/page.tsx

@@ -0,0 +1,6 @@
+import Image from 'next/image'
+import logo from './next.svg'
+
+export default function MyImage() {
+  return <Image alt="" src={logo} priority />
+}

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)

test/production/jest/next-image-preload/next-image-preload.test.ts

@@ -0,0 +1,52 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+import path from 'path'
+
+const appDir = path.join(__dirname, 'app')
+
+describe('next/jest', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        app: new FileRef(path.join(appDir, 'app')),
+        [`${appDir}/app/index.test.tsx`]: `
+        import { render, screen } from '@testing-library/react'
+        import Page from './page'
+
+        it('<Page /> renders', () => {
+          render(<Page />)
+
+          const logo = screen.getByRole('img')
+
+          expect(logo).toBeVisible()
+        })
+        `,
+        'jest.config.js': new FileRef(path.join(appDir, 'jest.config.js')),
+      },
+      dependencies: {
+        jest: '27.4.7',
+        '@testing-library/react': '^13.1.1',
+        jsdom: '^19.0.0',
+        '@testing-library/jest-dom': '5.16.4',
+      },
+      packageJson: {
+        scripts: {
+          // Runs jest and bails if jest fails
+          build:
+            'pnpm jest --forceExit tests/index.test.tsx && pnpm next build',
+        },
+      },
+      buildCommand: `pnpm build`,
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('Should not throw preload is undefined error', async () => {
+    expect(next.cliOutput).not.toContain(
+      '"Error: Uncaught [TypeError: (0 , _reactdom.preload) is not a function]'
+    )
+  })
+})