我现在正在做一个 React 项目（顺便说一句，我是一个 React 新手......）。
堆：
- “反应”：“^17.0.1”
- “@material-ui/core”：“^4.11.2”
- “反应路由器 dom”：“^5.2.0”
- “反应测试渲染器”：“^17.0.2”
我有一个选项卡布局（使用 Material-UI 中的选项卡和选项卡组件），如下所示：
const TabLayout = props => {
const {
tabs, authenticated, authorized, signInPath,
unauthorizedPath
} = props
const classes = useStyles()
const { t } = useTranslation()
const location = useLocation()
return (<>
<AppBar className={classes.bar}>
<Box className={classes.barDiv}>
<Tabs value={location.pathname} className={classes.tabs}>
{tabs.map(tab => (
<Tab key={tab.key} value={tab.to} label= {t(tab.label, tab.key)} component={Link} to={tab.to} className={classes.tab}/>
))}
</Tabs>
<div className={classes.rightBar}>
<div className={classes.rightBarElement}>
<img alt="xxx" height="28px" src="xxx.png" className={classes.logo} />
</div>
<UserInfo className={classes.rightBarElement} />
</div>
</Box>
</AppBar>
<Box className={classes.content}>
<Switch>
{tabs.map(tab => (
<PrivateRoute key={tab.key} path={tab.to} render={tab.render}
authenticated={authenticated}
authorized={authorized}
noAuthRedirect={signInPath}
noPermRedirect={unauthorizedPath} />
))}
<Route render={() => <Redirect to="/scenario" />} />
</Switch>
</Box>
<Footer />
</>
)
}
一切正常，控制台是空的，UX 和 UI 看起来像预期的那样，但是......
我尝试使用 react-test-renderer 添加快照测试，如下所示：
it('should render correclty', () => {
const elem = renderer.create(
<BrowserRouter>
<Provider store={mockStore(initialStore)}>
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>
</Provider>
</BrowserRouter>).toJSON()
expect(elem).toMatchSnapshot()
})
不幸的是，我收到了这些错误：
FAIL src/App.test.js
● Console
console.error
The above error occurred in the <ForwardRef(Tabs)> component:
at Tabs (/home/projectDir/node_modules/@material-ui/core/Tabs/Tabs.js:120:24)
at WithStyles(ForwardRef(Tabs)) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at div
at Styled(MuiBox) (/home/projectDir/node_modules/@material-ui/styles/styled/styled.js:95:28)
at header
at Paper (/home/projectDir/node_modules/@material-ui/core/Paper/Paper.js:55:23)
at WithStyles(ForwardRef(Paper)) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at AppBar (/home/projectDir/node_modules/@material-ui/core/AppBar/AppBar.js:114:23)
at WithStyles(ForwardRef(AppBar)) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at TabLayout (/home/projectDir/src/layouts/TabLayout/TabLayout.js:73:5)
at Route (/home/projectDir/node_modules/react-router/cjs/react-router.js:470:29)
at Switch (/home/projectDir/node_modules/react-router/cjs/react-router.js:676:29)
at Routes (/home/projectDir/src/Routes.js:16:11)
at Loading (/home/projectDir/src/views/Loading/Loading.js:14:5)
at Connect(Loading) (/home/projectDir/node_modules/react-redux/lib/components/connectAdvanced.js:233:41)
at App (/home/projectDir/src/App.js:16:45)
at ThemeProvider (/home/projectDir/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)
at Provider (/home/projectDir/node_modules/react-redux/lib/components/Provider.js:21:20)
at Router (/home/projectDir/node_modules/react-router/cjs/react-router.js:99:30)
at BrowserRouter (/home/projectDir/node_modules/react-router-dom/cjs/react-router-dom.js:67:35)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
console.error
The above error occurred in the <ForwardRef(Modal)> component:
at Modal (/home/projectDir/node_modules/@material-ui/core/Modal/Modal.js:92:36)
at Popover (/home/projectDir/node_modules/@material-ui/core/Popover/Popover.js:116:22)
at WithStyles(ForwardRef(Popover)) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at Menu (/home/projectDir/node_modules/@material-ui/core/Menu/Menu.js:65:32)
at WithStyles(ForwardRef(Menu)) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at UserInfo (/home/projectDir/node_modules/@cosmotech/ui/dist/index.cjs.js:575:5)
at WithStyles(UserInfo) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at div
at div
at Styled(MuiBox) (/home/projectDir/node_modules/@material-ui/styles/styled/styled.js:95:28)
at header
at Paper (/home/projectDir/node_modules/@material-ui/core/Paper/Paper.js:55:23)
at WithStyles(ForwardRef(Paper)) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at AppBar (/home/projectDir/node_modules/@material-ui/core/AppBar/AppBar.js:114:23)
at WithStyles(ForwardRef(AppBar)) (/home/projectDir/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
at TabLayout (/home/projectDir/src/layouts/TabLayout/TabLayout.js:73:5)
at Route (/home/projectDir/node_modules/react-router/cjs/react-router.js:470:29)
at Switch (/home/projectDir/node_modules/react-router/cjs/react-router.js:676:29)
at Routes (/home/projectDir/src/Routes.js:16:11)
at Loading (/home/projectDir/src/views/Loading/Loading.js:14:5)
at Connect(Loading) (/home/projectDir/node_modules/react-redux/lib/components/connectAdvanced.js:233:41)
at App (/home/projectDir/src/App.js:16:45)
at ThemeProvider (/home/projectDir/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)
at Provider (/home/projectDir/node_modules/react-redux/lib/components/Provider.js:21:20)
at Router (/home/projectDir/node_modules/react-router/cjs/react-router.js:99:30)
at BrowserRouter (/home/projectDir/node_modules/react-router-dom/cjs/react-router-dom.js:67:35)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
● App test suite › should render correclty
TypeError: Cannot read property '0' of undefined
81 |
82 | it('should render correclty', () => {
> 83 | const elem = renderer.create(
| ^
84 | <BrowserRouter>
85 | <Provider store={mockStore(initialStore)}>
86 | <ThemeProvider theme={theme}>
at Tabs (node_modules/@material-ui/core/Tabs/Tabs.js:166:32)
at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6016:18)
at updateForwardRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8038:20)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10015:16)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5)
at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13404:18)
at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13004:9)
at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16454:3)
at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17149:3)
at Object.<anonymous> (src/App.test.js:83:27)
我通过网络阅读了数百页，但我不知道如何解决这个问题......
我阅读了 React 文档、Material-UI 文档、Stackoverflow 上的线程......
我尝试使用 React.forwardRef() 来“包装” Tabs 组件并在道具中添加 ref={ref} 但没有成功（Tab 和 Link 也是如此）。
对于错误“上述错误发生在 <ForwardRef(Modal)> 组件中”我猜它是由于 Menu 和 MenuItem 使用...
好的，这是一个参考问题，但来自谁？Material-UI，react-renderer-test，我的代码？我有点迷路了，我真的很感谢你的帮助；）
非常感谢！