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

Question

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

，DrawerItem 也会存在

有了这个：

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

此测试通过：

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

1. 是否期望设置显示“none”仍然会在 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 应该能找到它。您可以使用 toHaveStyle matcher from the additional jest matchers

检查可见性

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