[testing] I can't set the Select component value with react testing library

[u-can-do-it]

I tried to open the select menu and then click an option but it didn't work.

      await userEvent.click(screen.getByRole("combobox"));
      await userEvent.click(screen.getByText("option1"));

[m-szczepanska1]

I have the same issue due to that it is hard for automating it at all. I write e2e playwright tests in TS and I checked all approaches and I am unable to click on option

[ryokryok]

@m-szczepanska1

I ran into the same issue! I was also lost trying to figure out Aria roles when writing tests with Playwright.

This test code worked well for me.

import { test, expect } from "@playwright/test";

test("Shadcn: select", async ({ page }) => {
  await page.goto("https://ui.shadcn.com/docs/components/select");
  await page.getByRole("combobox").first().click();
  await page
    .getByRole("listbox")
    .getByRole("option", { name: "Banana" })
    .click();

  await expect(page.getByRole("combobox").first()).toHaveText(/Banana/);
});

test("Radix: select", async ({ page }) => {
  await page.goto("https://www.radix-ui.com/primitives/docs/components/select");
  await page.getByRole("combobox").first().click();
  await page
    .getByRole("listbox")
    .getByRole("option", { name: "Pineapple" })
    .click();

  await expect(page.getByRole("combobox").first()).toHaveText(/Pineapple/);
});

It seems similar adjustments are needed not only for Shadcn but for Radix components as well. locator.selectOption() doesn't work in these cases.