I'm working on a React project right now (I'm a React newbie btw...).
Stack:
- "react": "^17.0.1"
- "@material-ui/core": "^4.11.2"
- "react-router-dom": "^5.2.0"
- "react-test-renderer": "^17.0.2"
I have a Tab layout (using Tabs and Tab component from Material-UI) as below:
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 />
</>
)
}
Everything works fine, the console is empty, the UX and UI look as desired but...
I try to add a snapshot test using react-test-renderer, like below:
it('should render correclty', () => {
const elem = renderer.create(
<BrowserRouter>
<Provider store={mockStore(initialStore)}>
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>
</Provider>
</BrowserRouter>).toJSON()
expect(elem).toMatchSnapshot()
})
Unfortunately I get these errors:
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)
I read like hundred pages through the Web but I cannot figure out how to solve this...
I read the React documentation, the Material-UI documentation, threads on Stackoverflow,...
I tried to "wrap" Tabs component by using React.forwardRef() and add ref={ref} in props but no success (same thing for Tab and Link).
For the error "The above error occurred in the <ForwardRef(Modal)> component" I guess its due to Menu and MenuItem use...
Ok it's a ref problem, but from who? Material-UI, react-renderer-test, my code ? I'm kind of lost and I will REALLY appreciate your help ;)
Thanks a lot!