How do you overcome the "not wrapped in act()" warnings when composing Jest unit tests for components?

[terrymun]

I have ran into a pickle here when composing Jest unit tests for my components that consume Radix UI components: I get a lot of warning messages even though the tests are passing, e.g.:

Warning: An update to PopperContent inside a test was not wrapped in act(...).
Warning: An update to Presence inside a test was not wrapped in act(...).

Let's say I want to verify that the number of items rendered in a dropdown menu is correct. The following example is of course highly simplified (in reality, we pass items as an array and its length may vary + some are disabled, which necessitates asserting that the right number of items are indeed rendered):

import { Root, Trigger, Portal, Content, Item } from '@radix-ui/react-dropdown-menu';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('should render a dropdown menu with predefined number of items', async () => {
  const dummyItems = ['Item 1', 'Item 2', 'Item 3'];
  render(
    <Root>
      <Trigger asChild>
        <button data-testid="trigger-button">Open dropdown</button>
      </Trigger>
      <Portal>
        <Content>
          {dummyItems.map((item) => (
            <Item key={item}>
              <span data-testid="item-content">{item}</span>
            </Item>
          ))}
        </Content>
      </Portal>
    </Root>
  );

  await userEvent.click(screen.getByTestId('trigger-button'));
  const items = await screen.findAllByTestId('item-content');
  expect(items).toHaveLength(dummyItems.length);
});

This triggers many warnings in the terminal:

console.error
    Warning: An update to PopperContent inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at [REDACTED_PATH]/node_modules/@radix-ui/react-popper/dist/packages/react/popper/src/Popper.tsx:136:7
        at [REDACTED_PATH]/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx:61:11
        at [REDACTED_PATH]/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx:13:11
        at [REDACTED_PATH]/node_modules/@radix-ui/react-primitive/dist/packages/react/primitive/src/Primitive.tsx:46:13

// ...and more

Of course I can wrap everything in act(), but it feels like a code smell to me:

await act(async () => {
  await userEvent.click(screen.getByTestId('trigger-button'));
});

const items = await screen.findAllByTestId('item-content');
expect(items).toHaveLength(dummyItems.length);

I have tried to look at if there are any unit tests written for your DropdownMenu component, but it seems like there is none. However I do see that you have some written for the Dialog component, and I wonder if you've ran into similar issues before—and if you did, how did you get about fixing it?

[benoitgrelard]

We tend to rely on higher level tests that run in real browsers like Cypress, and visual regression tests using Chromatic but maybe others can offer their perspective.

[emirotin]

2.5 years later it's still the problem
We get literally thousands of lines of warnings coming from Dropdown Menu, Select, etc
All seem to be related to the fact that once e.g. a Dropdown is opened, it does something in the background or it is not properly unmounted in the end (due to Portals?)
Manually wrapping all events in act doesn't help either

[terrymun]

I haven't personally come across this issue, but I've been using asynchronous assertions such as expect(await screen.findByRole(...)).