react-native - React-Navigation V6 Drawer.Item drawerItemStyle: { display: "none" } 仍然在 react-test-renderer 中渲染 DrawerItem

Question

我正在尝试编写一个测试，其中抽屉项目从不可见变为可见。我实现可见性开关的方式是drawerItemStyle将抽屉项目上的道具从切换display: "none"到display: "flex"。这适用于android模拟器。但是，当我使用 react native 测试库渲染 Drawer 导航器时，即使 DrawerItemStyle 属性设置为， DrawerItem 也存在display: "none"。

有了这个：

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

该测试通过：

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

1. 是否期望设置显示“无”仍会在 react-test-renderer 中呈现它？
2. 有没有更好的方法来切换可见性？
3. 有没有更好的方法来测试能见度？

更新：找到解决方案

我不得不这样做：

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

由于该项目存在于渲染中，因此 RNTL 预计会找到它。您可以使用其他 jest 匹配器中的toHaveStyle匹配器检查可见性

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

Answer 2

这基本上就是我最终如何让它工作的：

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