How to avoid act() with sub component changes?

Question

I'm using the Select component from patternfly and attempting to do a test that involves making changes to the selection. I feel like I'm in a catch 22 as I can make the tests pass without the use act() messages if I do this:

  await waitFor(() => {
    userEvent.click(screen.getByLabelText(labelText));
  });
  userEvent.click(screen.getAllByRole('option')[optionNumber]);

however, I then get a lint error saying Avoid using side effects within 'waitFor' callback

If I remove the waitFor(), and do

userEvent.click(screen.getByLabelText(labelText));
userEvent.click(screen.getAllByRole('option')[optionNumber]);

My tests give me the console errors saying Warning: An update to Popper inside a test was not wrapped in act(...).

One point worth noting, I'm only having this issue if I'm appending what ends up being the "Popper" menu (where the options reside) to document.body (or anywhere other than "inline") using the Select component's menuAppendTo prop. I have to do this to prevent some clipping issues with the menu being in a modal.

For now I'm just ignoring the lint issue:

 await waitFor(() => {
   // eslint-disable-next-line testing-library/no-wait-for-side-effects
   userEvent.click(screen.getByLabelText(labelText));
 });
 userEvent.click(screen.getAllByRole('option')[optionNumber]);

How can I satisfy both the test and the lint?

Answer 1

I was able to fix this issue by putting an await on a findBy for the options prior to clicking them, like so:

userEvent.click(screen.getByLabelText(labelText));
const options = await screen.findAllByRole('option');
userEvent.click(options[optionNumber]);