"Error: Uncaught [TypeError: (0 , _reactdom.preload) is not a function]" when running jest

[roryhen]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.4
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Jest (next/jest)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/lively-monad-rr5hgl

To Reproduce

Run npm run test in a new terminal in the codesandbox repro provided

Describe the Bug

In jest tests where <Image /> from next/image is being used with priority={true} set, when I attempt to run jest it throws this error Error: Uncaught [TypeError: (0 , _reactdom.preload) is not a function].

It seems to be introduced in next@13.4.11, when I install next@13.4.10 the error goes away. It also prints The above error occurred in the <ImagePreload> component in the terminal so I tracked it down to this PR (#52425) where preload from react-dom is imported and used in that component which I suspect could be part of the issue.

Not sure of how to workaround the issue, but I'm open to suggestions.

Expected Behavior

I expect to be able to run jest tests using Image components without errors from the framework.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1482

[elliotgonzalez-lk]

Just updated to next@13.4.11. Same issue. Over 500 tests failing.

[ChrisCrossCrash]

I'm also having this problem when I run Cypress component testing on the following component:

const ImageBackground = (props: ImageBackgroundProps) => {
  const uploadUrl = process.env.NEXT_PUBLIC_UPLOAD_URL
  if (!uploadUrl) {
    throw new Error('NEXT_PUBLIC_UPLOAD_URL is not defined')
  }

  const imageMobileUrl = getFullUrl(props.imageMobile.url, uploadUrl)
  const imageDesktopUrl = getFullUrl(props.imageDesktop.url, uploadUrl)

  return (
    <>
      <Image
        src={imageMobileUrl}
        fill
        alt=''
        className={styles.imageBgMobile}
        data-cy='hero-bg-image-element'
        // Commenting out `priority` fixes the error:
        // (0 , _reactdom.preload) is not a function
        // However, it also disables preloading the image, which is not ideal.
        priority
      />
      <Image
        src={imageDesktopUrl}
        fill
        alt=''
        className={styles.imageBgDesktop}
        data-cy='hero-bg-image-element'
        quality={50}
        priority // Same as above comment.
      />
    </>
  )
}

I'm using Next version 13.4.12 and Cypress version 12.17.2.

[roryhen]

As a temporary workaround, I ended up adding a mock in our jest.setup.js:

import React from 'react'

function MockImage(props) {
  return React.createElement('img', props)
}
jest.mock('next/image', () => MockImage)

Not perfect, but works for us for now.

[fuyu77]

import type * as ReactDom from 'react-dom';

jest.mock('react-dom', () => ({
  ...jest.requireActual<typeof ReactDom>('react-dom'),
  preload: jest.fn(),
}));

It also works for us by mocking react-dom.

[C4rl0s]

jest.mock('react-dom', () => ({
  ...jest.requireActual<typeof ReactDom>('react-dom'),
  preload: jest.fn(),
}));

This worked for me too :)