Estoy usando Jest/React Testing Library para probar la interfaz de usuario.

Tengo un componente cuya declaración de devolución se ve así:

 const sidebarContentUp = ( <Drawer anchor="left" onClose={onMobileClose} open={openMobile} PaperProps={{ sx: { backgroundColor: 'background.paper', width: 280, }, }} variant="temporary" data-testid="drawer-up" > {content} </Drawer> ); const sidebarContentDown = ( <Drawer anchor="left" open PaperProps={{ sx: { backgroundColor: 'background.paper', height: 'calc(100% - 64px) !important', top: '64px !Important', width: 280, }, }} variant="persistent" > {content} </Drawer> ); return ( <> {process.env.NEXT_PUBLIC_IS_TESTING ? ( <Grid> <div>div2</div> {sidebarContentUp} {/* {sidebarContentDown} */} <div>div3</div> </Grid> ) : ( <> <Hidden lgUp>{sidebarContentUp}</Hidden> <Hidden lgDown>{sidebarContentDown}</Hidden> </> )} </> ); };

No hay atributos ocultos ni nada para sidebarContentUp , pero nunca se representa en jsdom cuando se ejecutan pruebas.

solo veo div2 y div3

No pude darme cuenta durante días.

¿Por qué no se procesa y cómo puedo solucionarlo?

Otro problema que podría dar más pistas es que cuando no tengo {sidebarContentDown} comentado, arroja un error

 Error: Uncaught [TypeError: Cannot read property 'includes' of undefined]