React-Navigation V6 Drawer.Item drawerItemStyle: { display: "none" } still renders DrawerItem in react-test-renderer

Question

I am trying to write a test where Drawer item goes from invisible to visible. The way I am implementing the visibility switch is by toggling the drawerItemStyle prop on the Drawer item from display: "none" to display: "flex". This works in an android emulator. However, when I render the Drawer navigator with react native testing library the DrawerItem is present even when the drawerItemStyle prop is set to display: "none".

With this:

<DrawerStack.Screen
  name="Name"
  component={Component}
  options={{
    title: "Title",
    drawerItemStyle: {
      display: "none",
    },
  }}
/>

This test passes:

const { getByText } = render(<DrawerNavigator />);
getByText("Title")

1. Is it expected that setting display "none" will still render it in react-test-renderer?
2. Is there a better way to toggle the visibility?
3. Is there a better way to test the visibility?

Update: Solution Found

I had to do this:

const { container } = render(<Component />);
const drawerItemsProps = container .findAllByType(DrawerItem).map((e: any) => e.props);
const targetProps = drawerItemsProps[drawerItemsProps.findIndex((e: any) => e.label === "Title")];
const { style: { display },  } = targetProps;
expect(display).toEqual('none');

Answer 1

As the item is present in the render, it's expected for RNTL to find it. You could check the visibility with the toHaveStyle matcher from the additional jest matchers

const { getByText } = render(<DrawerNavigator />);
expect(getByText("Title")).toHaveStyle({display: 'none'});

Answer 2

This is basically how i got it working in the end:

const { container } = render(<Component />);
const drawerItemsProps = container.findAllByType(DrawerItem).map((e: any) => e.props);
const targetProps = drawerItemsProps[drawerItemsProps.findIndex((e: any) => e.label === "Title")];
const { style: { display }, } = targetProps;
expect(display).toEqual('none');