Estoy escribiendo pruebas unitarias de UI usando Jest/Testing Library.
Tengo un componente DashboardLayout que devuelve
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>Como puede ver, configuré testid en MenuIcon.
Sin embargo, al renderizar en prueba, getByTestId falla.
// skip setup above render( <Provider store={store}> <DashboardLayout /> </Provider>, ); const sidebarIcon = screen.getByTestId('sidebar-icon'); expect(sidebarIcon).toBeVisible();Configuré todo correctamente, como enrutador simulado, proveedor, etc.
¿Por qué está pasando esto?
¿Debería representar DashboardNavbar solo? (aunque no estoy seguro de si esto sería una buena prueba de unidad de interfaz de usuario)
Es posible que deba simular el componente secundario y probar el componente simulado
// 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> `);