英文:
Jest : The document global was defined when React was initialized, but is not defined anymor
问题
以下是您要翻译的内容：
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.
在我的 Jest 测试中，我不断收到这个错误，当我尝试渲染组件时出现错误。
错误：在 React 初始化时定义了 document 全局对象，但现在不再定义。如果组件从异步回调中安排更新，但测试已经完成运行，就会出现这种情况。要解决此问题，您可以在测试结束时卸载组件（并确保取消 componentWillUnmount 中的任何异步操作），或者将测试本身更改为异步测试。
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:
当 LogContainer 定义如下时，就会出现错误：
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'}}>
{'Logs : '}
)
}
But the error does not appear when I omit <IconButton/>.
但是当我省略 <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).
为什么会这样？是什么导致 <IconButton/> 使测试崩溃并引发此错误？（考虑到 Typography 和 IconButton 都来自同一库）。
Things I tried
我尝试过的方法：
- Setting the test as
async - Specifying
/** @jest-environment jsdom */at the very top of the file - Using
setImmediateas suggested by this answer
什么都没有解决这个问题。
英文:
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).
Things I tried
- Setting the test as
async - Specifying
/** @jest-environment jsdom */at the very top of the file - Using
setImmediateas suggested by this answer
Nothing fixed the issue.
答案1
得分: 0
错误在更新@testing-library包到它们（当前的）最新版本时消失了：
@testing-library/jest-dom": "^5.16.5",
@testing-library/react": "^14.0.0",
@testing-library/user-event": "^14.4.3",
英文:
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",
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论