I am using Jest/React Testing Library to test the UI.

I have a component whose return statement looks like this:

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

There are no hidden attributes or anything for sidebarContentUp, but it is never rendered in the jsdom when running tests.

I only see div2 and div3

I could not figure out for days.

Why is it not rendered, and how can I fix this?

Another issue that might give more hints is that when I don't have {sidebarContentDown} commented out, it throws an error

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