How to simulate choosing an icon from the PnP Icon Picker in a Jest unit test?

Question

I am using the PnP icon picker in a react web site. Is it possible to simulate the selection of an icon in a Jest unit test with this component? It seems not...

This is the Icon Picker:

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

This is the component as shown in the vs code terminal. It doesn't seem to expose its content.

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

Here's a section of my Jest test:

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

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

I can find the icon picker component but getting the icons fails. All attempts to access inner components fails... (labels, buttons, inputs, etc)

Answer 1

For the benefice of everyone, I am post a message here.

Me and a colleague, we came to the conclusion that it is impossible to simulate the selection of an icon in the PnP Icon Picker in a Jest unit test because the components within are "hidden".

So we decided to create our own Fluent UI Icon Picker.

Thanks!