I keep receiving this error in my Jest tests, when I try to render components
Error: The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`), or you can change the test itself to be asynchronous.
at Object.invokeGuardedCallbackDev (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:12556:15)
at invokeGuardedCallback (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:12709:31)
at reportUncaughtErrorInDEV (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:12736:5)
at captureCommitPhaseError (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16327:5)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14034:13)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14079:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14079:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14079:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14079:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14026:9)
at recursivelyTraverseMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14006:7)
at commitMutationEffectsOnFiber (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14165:9)
at commitMutationEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:13978:3)
at commitRootImpl (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16053:5)
at commitRoot (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:15933:5)
at performSyncWorkOnRoot (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:15454:3)
at flushSyncCallbacks (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:2597:22)
at flushPassiveEffectsImpl (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16261:3)
at flushPassiveEffects (C:\Users\512619\source\repos\webpage\WebPage\client\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16197:14)
After this error pops up in the log, the subsequent test hangs forever.
The error appears when I include certain sub-components in my testing target.
Here is the test :
import renderer from 'react-test-renderer'
import React from 'react'
import LogContainer from '../logsContainer/LogContainer'
import { createMemoryHistory } from 'history'
it('Renders normally', async () => {
const component = renderer.create(
<LogContainer log={[{message:'Hello'},{message:'World'}]} setLog={() => {}}/>
)
let tree = component.toJSON()
expect(tree).toMatchSnapshot()
})
The error pops up when LogContainer
is defined like this :
import {Typography,IconButton } from '@mui/material';
import Box from '@mui/material/Box';
export type LogMsg = {
message: string,
error?: boolean,
success?: boolean,
warning?: boolean
}
type Props = {
autoScroll?: boolean,
log: LogMsg[],
setLog: (newLog: LogMsg[]) => void
}
export default function LogContainer ({autoScroll, log, setLog}:Props) {
return(
<Box sx={{width: '50em'}}>
<Typography>
{('Logs : ')}
</Typography>
<IconButton title='Clear' aria-label="delete"/>
</Box>
)
}
But the error does not appear when I omit <IconButton/>
.
Why is that ? What makes <IconButton/>
responsible for crashing the test and throwing this error ? (given both Typography
and IconButton
come from the same library).
async
/** @jest-environment jsdom */
at the very top of the filesetImmediate
as suggested by this answerNothing fixed the issue.
The error disappeared when updating @testing-library
packages to their (current) last version :
@testing-library/jest-dom": "^5.16.5",
@testing-library/react": "^14.0.0",
@testing-library/user-event": "^14.4.3",