如何解决Material-UI + React-test-renderer + React-Router + Tabs/Tab 组件和 Modal 组件
我现在正在做一个 React 项目(顺便说一句,我是一个 React 新手......)。
堆栈:
- “反应”:“^17.0.1”
- "@material-ui/core": "^4.11.2"
- "react-router-dom": "^5.2.0"
- "react-test-renderer": "^17.0.2"
我有一个 Tab 布局(使用 Material-UI 中的 Tabs 和 Tab 组件),如下所示:
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 组件并在 props 中添加 ref={ref} 但没有成功(Tab 和 Link 也是如此)。
对于错误“上述错误发生在
好吧,这是一个参考问题,但来自谁? Material-UI,react-render-test,我的代码? 我有点迷茫,我真的很感激你的帮助 ;)
非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。