javascript - Hvorfor rendres ikke barnekomponenten når jeg tester med React Testing Library?

Jeg skriver UI-enhetstester ved å bruke Jest/Testing Library.

Jeg har en DashboardLayout-komponent som returnerer

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

DashbordNavigasjonslinje :

<DashboardNavbarRoot {...other}>
      <Toolbar sx={{ minHeight: 64 }}>
        <Hidden lgUp>
          <IconButton color="inherit" onClick={onSidebarMobileOpen}>
            <MenuIcon fontSize="small" data-testid="sidebar-icon" />
          </IconButton>
        </Hidden>

Som du kan se, satte jeg testid i MenuIcon.

Men når man renderer i test, feiler getByTestId.

// skip setup above

render(
    <Provider store={store}>
      <DashboardLayout />
    </Provider>,
  );
 const sidebarIcon = screen.getByTestId('sidebar-icon');

  expect(sidebarIcon).toBeVisible();

Jeg setter opp alt korrekt, som test-ruter, Provider osv.

Hvorfor skjer dette?

Bør jeg bare rendre DashboardNavbar for seg selv? (ikke sikker på om dette ville være en god enhetstest for UI, though)

Svar #1

Du kan trenge å mocke barnekomponenten og teste for den mockede komponenten

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