-
Notifications
You must be signed in to change notification settings - Fork 26.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Error: Uncaught [TypeError: (0 , _reactdom.preload) is not a function]" when running jest #53272
Comments
Just updated to next@13.4.11. Same issue. Over 500 tests failing. |
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. |
As a temporary workaround, I ended up adding a mock in our 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. |
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 |
This worked for me too :) |
…#53443) ### 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>
Bumped my nextjs to 13.4.13, the error still exists. Solutions above still work also. |
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify 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 providedDescribe the Bug
In jest tests where
<Image />
fromnext/image
is being used withpriority={true}
set, when I attempt to runjest
it throws this errorError: 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) wherepreload
fromreact-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
The text was updated successfully, but these errors were encountered: