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

Question

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

有了这个：

<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

这基本上就是我最终得到它的方式：

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 2

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

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