如何在 Jest 单元测试中模拟从 PnP 图标选择器中选择图标？

Question

我在 React 网站中使用 PnP 图标选择器。 是否可以使用此组件模拟 Jest 单元测试中图标的选择？好像不是……

这是图标选择器：

<IconPicker buttonLabel={"Choose icon..."}
   renderOption="panel"
   data-testid="iconpicker"
   onSave={(selectedIconName: string) => { 
   setIconName(selectedIconName); 
   setIconErrorMessage("");
}}

这是 VS Code 终端中显示的组件。看起来并没有暴露其内容。

<iconpicker
   buttonlabel="Choose icon..."
   data-testid="iconpicker"
   renderoption="panel"
/>

这是我的 Jest 测试的一部分：

const iconPicker = await screen.getByTestId("iconpicker");
await act(async () => {
  fireEvent.click(iconPicker);
});

const addFavoriteIconButton = await screen.findByText("AddFavorite");
expect(addFavoriteIconButton).toBeInTheDocument();
userEvent.click(addFavoriteIconButton);

我可以找到图标选择器组件，但获取图标失败。所有访问内部组件的尝试都会失败...（标签、按钮、输入等）

Answer 1

为了大家的利益，我在这里留言。

我和一位同事得出的结论是，不可能在 PnP 图标选择器中模拟图标的选择，因为其中的组件是“隐藏的”。

因此我们决定创建自己的 Fluent UI 图标选择器。

谢谢！