Why isn't child component rendering when testing with React Testing Library?

Question

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)

Answer 1

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>
    `);