After updating Next to 13.4.11 I get " TypeError: (0 , _reactdom.preload) is not a function" error in most of my Jest tests. I am using /pages directory.
#Next 13.4.11 breaks almost all of my Jest tests with Treactdom.preload) error
red wigeon
crude tendonBOT
Hi @red wigeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The error you're encountering might be related to the use of new ReactDOM methods for preloading resources, as mentioned in the Next.js documentation (https://nextjs.org/docs/app/api-reference/functions/generate-metadata).
Here's an example of how these methods are used:
'use client'
import ReactDOM from 'react-dom'
export function PreloadResources() {
ReactDOM.preload('...', { as: '...' })
ReactDOM.preconnect('...', { crossOrigin: '...' })
ReactDOM.prefetchDNS('...')
return null
}
However, these methods are not directly supported by Jest. Jest is a JavaScript testing framework that runs in a Node.js environment, not in a browser environment. This means that browser-specific globals like window or document and specific methods like ReactDOM.preload are not available in Jest tests unless you're using a library like jest-environment-jsdom to simulate these browser-specific globals.
In the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/optimizing/testing), it's mentioned that you need to set up Jest with jest-environment-jsdom:
npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
And in your Jest configuration:
import nextJest from 'next/jest.js'
const createJestConfig = nextJest({
dir: './',
})
const config = {
testEnvironment: 'jest-environment-jsdom',
}
export default createJestConfig(config)
If you've already done this and are still encountering the error, it's possible that the version of react-dom you're using doesn't support these methods. You might need to update react-dom to a version that includes these methods.
If none of these solutions work, you might need to mock these methods in your Jest tests. However, without more specific information about your tests and your setup, it's hard to provide a more specific solution.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
red wigeon
@crude tendon
The metadata object and generateMetadata function exports are only supported in Server Components.
But I am not using server components, I use /pages, which I believe is not server components?
crude tendonBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you're correct. The metadata object and generateMetadata function exports are specific to Server Components, as mentioned in the Next.js documentation (https://nextjs.org/docs/app/api-reference/functions/generate-metadata).
Server Components in Next.js are a new type of component that allow developers to write code that runs on the server, then sends the result to the client. This can lead to performance improvements, as it allows for reducing the amount of JavaScript sent to the client.
However, if you're using the /pages directory, you're likely using traditional React components, which are not the same as Server Components. Traditional React components in the /pages directory are rendered on the server by default in Next.js, but they're sent to the client as JavaScript, and they run on the client after the initial page load.
If you're not using Server Components, you likely don't need to use the metadata object or the generateMetadata function. These are used to provide metadata for Server Components, such as the resources that the component needs to preload. If you're using traditional React components, you can handle resource loading in other ways, such as using the useEffect hook or other lifecycle methods.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
red wigeon
@crude tendon
Yes, so how do I fix this error with my Jest tests?
crude tendonBOT
Let me check the knowledge base for you. One moment! :books:
The error you're encountering is likely due to the use of ReactDOM.preload in your code, which is not recognized in the Jest testing environment.
To resolve this issue, you can mock the ReactDOM methods in your Jest setup file or directly in your test files. Here's an example of how you can do this:
jest.mock('react-dom', () => ({
...jest.requireActual('react-dom'), // use actual for all non-hook parts
preload: () => {},
preconnect: () => {},
prefetchDNS: () => {},
}));
This code creates a mock version of react-dom that includes all the actual exports from react-dom, but replaces preload, preconnect, and prefetchDNS with empty functions.
If you're using a Jest setup file, you can put this code in that file. If you're not using a Jest setup file, you can put this code at the top of each test file that's failing due to this error.
Remember to update your Jest configuration to use jest-environment-jsdom as mentioned in the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/optimizing/testing):
import nextJest from 'next/jest.js'
const createJestConfig = nextJest({
dir: './',
})
const config = {
testEnvironment: 'jest-environment-jsdom',
}
export default createJestConfig(config)
This should help Jest understand the browser-specific methods and resolve the error.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
red wigeon
@crude tendon
jest.mock('react-dom', () => ({
...jest.requireActual('react-dom'), // use actual for all non-hook parts
preload: () => {},
preconnect: () => {},
prefetchDNS: () => {},
}));
Fixed the issue for me, thanks.
crude tendonBOT
Let me check the knowledge base for you. One moment! :books:
I'm glad to hear that the issue has been resolved! Mocking the ReactDOM methods in Jest is a common approach when dealing with methods that are not available in the Jest testing environment.
Here's the code you used for future reference:
jest.mock('react-dom', () => ({
...jest.requireActual('react-dom'), // use actual for all non-hook parts
preload: () => {},
preconnect: () => {},
prefetchDNS: () => {},
}));
This code creates a mock version of react-dom that includes all the actual exports from react-dom, but replaces preload, preconnect, and prefetchDNS with empty functions. This allows your tests to run without errors related to these methods.