如何测试使用useRef打开的底部工作表？

Question

在本机反应中，我有一个底部工作表，我想测试它在单击按钮时是否可以正确打开。 底表来自库 Gorhom 底表，它使用 useRef 和方法（extend、present...）。 我尝试在不模拟 useRef 上的方法的情况下测试我的组件，但出现错误

 _addChannelBsRef$curr.present is not a function

.

但是如果我用该方法模拟 useRef ，底部的工作表将无法打开。

我该如何测试？

这里是我的代码示例：

触发该功能的组件：

    const VerticalKlubListItemNewChannel = ({
  openAddChannelBs,
  selectedKlub,
}: VerticalKlubListItemNewChannelProps) => {


  const pressAddNewChannel = () => {
    openAddChannelBs();
  };

  return (
    <TouchableOpacity
      testID={BtnTestIds.openNewChannelBtn}
      onPress={pressAddNewChannel}
      style={styles.container}>
      <CustomText color={colorsTheme.primary} fontWeight="semiBold">
        new channel
      </CustomText>
    </TouchableOpacity>
  ) : null;
};

向下传递给组件的函数：

 const openAddChannelBs = useCallback(() => {
    addChannelBsRef.current?.present();

  }, []);

我的测试看起来像这样：

describe("AddNewChannelBottomSheet", () => {
  it("open the bottom sheet onPress button", async () => {
    const { getByTestId } = render(
      <LeftDrawerChannel navigation={navigation as any} />,
      {
        preloadedState: {
          channel: {
            currentSelectedKlub: { user: { klubRole: "admin" } },
          } as any,
        },
      },
    );

    const { getByText } = render(
      <AddNewchannelBs
        addChannelBsRef={
          mockOpenBsRef as unknown as BottomSheetModaleContainerRefType
        }
      />,
    );

    const openBsAddNewchannel = getByTestId(BtnTestIds.openNewChannelBtn);

    expect(openBsAddNewchannel).toBeTruthy();

    fireEvent.press(openBsAddNewchannel);

    const getText = getByText(
      "Enter the name of the channel that will be visible to members",
    );

    await waitFor(() => {
      expect(getText).toBeTruthy();
    });
  });
});

Answer 1

不要使用present()，尝试像下面这样的expand()方法，它应该可以工作

const openAddChannelBs = useCallback(() => {
  addChannelBsRef.current?.expand();
}, []);