How to test Dropdown Menu with react-testing-library?

[grelas]

Apologize if this has already been asked, but having a hard time asserting that menu items are present on trigger click using react-testing-library. Here's basic component:

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

const MyComponent = ({ onClick, items ) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  return (
    <div>
      <DropdownMenu.Root>
        <DropdownMenu.DropdownMenuTrigger asChild>
          <Button size="sm">All</Button>
        </DropdownMenu.DropdownMenuTrigger>
        <DropdownMenu.Content>
          {items.map((item) => (
            <DropdownMenu.Item
              key={item.id}
              onClick={(e) => {
                e.preventDefault();
                onClick && onClick(item);
                setDropdownOpen(false);
              }}
            >
              {item.name}
            </DropdownMenu.Item>
          ))}
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    </div>
  );
};

And my test:

it('renders a dropdown with items', () => {
    render(<MyComponent items={mockItems} />);

    const menuBtn = screen.getByRole('button', {
      name: /all/i
    });
    expect(menuBtn).toBeInTheDocument();
    userEvent.click(menuBtn);
    // don't see the dropdown menu / items
    screen.debug();
    expect(screen.getAllByRole('menuitem')).toHaveLength(mockItems.length);
  });

I understand that the component is tested, but my app will have specific logic for items that I need to test.

[klinem]

The userEvent API is asynchronous and needs to be awaited:

it('renders a dropdown with items', async () => {
    render(<MyComponent items={mockItems} />);

    const menuBtn = screen.getByRole('button', {
      name: /all/i
    });
    expect(menuBtn).toBeInTheDocument();
    await userEvent.click(menuBtn);
    // don't see the dropdown menu / items
    screen.debug();
    expect(screen.getAllByRole('menuitem')).toHaveLength(mockItems.length);
});