I am writing UI unit tests using Jest/Testing Library.
I have a DashboardLayout component that returns
return (
<DashboardLayoutRoot sx={{ marginTop: '30px' }}>
<DashboardNavbar
onSidebarMobileOpen={(): void => setIsSidebarMobileOpen(true)}
/>
<DashboardSidebar
onMobileClose={(): void => setIsSidebarMobileOpen(false)}
openMobile={isSidebarMobileOpen}
/>
<DashboardLayoutWrapper>
<DashboardLayoutContainer>
<DashboardLayoutContent>{children}</DashboardLayoutContent>
</DashboardLayoutContainer>
</DashboardLayoutWrapper>
</DashboardLayoutRoot>
);
DashboardNavBar:
<DashboardNavbarRoot {...other}>
<Toolbar sx={{ minHeight: 64 }}>
<Hidden lgUp>
<IconButton color="inherit" onClick={onSidebarMobileOpen}>
<MenuIcon fontSize="small" data-testid="sidebar-icon" />
</IconButton>
</Hidden>
As you can see I set testid in MenuIcon.
However, when rendering in test, getByTestId fails.
// skip setup above
render(
<Provider store={store}>
<DashboardLayout />
</Provider>,
);
const sidebarIcon = screen.getByTestId('sidebar-icon');
expect(sidebarIcon).toBeVisible();
I do set up everything correctly, like mock router, Provider etc.
Why is this happening?
Should I just render DashboardNavbar by itself? (not sure if this would be good UI unit test though)
You might need to mock the child component and test for mocked component
// skip setup above
jest.mock('./MenuIcon', () => ({ MenuIcon : () => 'mocked menu icon' }));
const container = render(
<Provider store={store}>
<DashboardLayout />
</Provider>,
);
expect(container).toMatchInlineSnapshot(`
<div>
mocked menu icon
</div>
`);