How to write unit test for dropdown menu component with Vitest and React-testing-library

[lazarus2019]

How to write unit test for dropdown menu component with Vitest and React-testing-library, I can not get the dropdown content to expect it to be in the document

[Miloshinjo]

I recently wrote a test suite for a radix dropdown with Vitest and RTL.

Here is one test as example.

test('displays the dropdown on trigger click', async () => {
    const user = userEvent.setup();
    const props = getProps();

    render(<DropdownMenu {...props} />);

    // Get trigger button and click it
    const triggerButton = screen.getByRole('button');
    await user.click(triggerButton);

    // Get menu and menu items
    const menu = screen.getByRole('menu');
    const menuItems = screen.getAllByRole('menuitem');

    // Assertions
    expect(triggerButton).toHaveAttribute('aria-expanded', 'true');
    expect(menu).toBeInTheDocument();
    expect(menuItems.length).toBe(props.items.length);
  });

[manvydas-tbol]

@Miloshinjo What if there is more than 1 menu on the screen? How would you distinct between those?

[snelsi]

Use testId or get the specific dropdown button by text.