Question: How to select an option in select input (mat-select)

[jk-kiran-palakurthi]

Target:
I am writing a module where I need to hide input elements based on some conditions. I need to select an option of material select input.

Problem:
Unable to test it, the test assertion throws error.
TestingLibraryElementError: Value "Partnership" not found in options

Reproduction:

• I am loading mat options using *ngFor (below are my options)

[
    {
        value: 'Public Limited Company',
        label: 'Public Limited Company',
    },
    {
        value: 'Private Limited Company',
        label: 'Private Limited Company',
    },
    {
        value: 'Partnership',
        label: 'Partnership',
    },
    {
        value: 'Limited Liability Partnership',
        label: 'Limited Liability Partnership',
    }
]

• Below is my assertion code.

const firmType = screen.queryByLabelText(/Firm Type/i);
const isGstPresent = screen.queryByLabelText(/Is Gst Available/i);
const gstNumber = screen.queryByLabelText(/GST Number/i);
        
userEvent.selectOptions(firmType, 'Partnership');

await waitFor(() => {
    expect(isGstPresent).toBeInTheDocument();
    expect(taxPayerType).not.toBeInTheDocument();
});

Any help is appreciated.

[jk-kiran-palakurthi]

It seems userEvent.selectOptions(firmType, 'Partnership') does not work for mat-select

[timdeschryver]

There's a workaround in our examples (click on the select input, and then click on the option).

If you're interested, feel free to take a look and see what's needed to support an Angular Material select input.

[durgakiran]

Sorry for the late reply, this is my personal GitHub account. I am committing at least 4hr per week time from today to look into this issue.Thanks.

[sluipersbeck]

I tried the suggested workaround, but the (selectionChange) Event of the mat-select was not triggered by the click on the option. The change handler method assigned to the selectionChange Event was not called when I was debugging the test case.

In my example a button should be displayed when a certain entry of the drop down is selected.

[timdeschryver]

Closing this issue because it's been inactive.

[tiagomsmagalhaes]

The link above is dead (possible file moving?) The new link with the example

[VictorJSV]

This is the userEvent correct use for mat-select

const user = userEvent.setup()
...
const select = screen.getByRole('combobox', { name: /List/i })
await user.click(select)
await user.click(screen.getByText(/Minimarket/i))

... assertions ...

[vmuresanu]

In my case there were a couple of moments that i'd like to reflect here. Because it took me a couple of hours to get it working and maybe I'll help someone save time.

1. First and foremost had a huge headache with the fact that const select = screen.getByRole('combobox', { name: /someName/i }) always threw error that it couldn't find the <mat-select name="someName"> even though in examples it works. Apparently the problem was that { name: /someName/i } actually looks for either a placeholder="someName" or a <mat-label> and it has nothing to do with attribute name="someName". And in our case we have an inline label-less and placeholder-less select. Hence why it couldn't find. After adjusting to <mat-select placeholder="someName"> tests worked fine.
2. Another possibility to retrieve mat-select is to get by <mat-label>. Say we have <mat-label> someName </mat-label> then - const select = screen.getByLabelText(/someName/i) will retrieve the select object.
3. Third option is to give a data testid <mat-select data-testid="someTestId"> and in spec to retrieve it with - screen.getByTestId('someTestId'). For our scenario this was the best option as we shouldn't have any labels or placeholders.

Some notes about the provided solutions:

1. userEvent is available in a separate package - @testing-library/user-event and to use userEvent it needs to be imported - import userEvent from '@testing-library/user-event'
2. It's not necessary to run userEvent.setup(), you can directly invoke await userEvent.click(select) (emphasizing await because it is a promise and needs to be resolved). Otherwise you'll get incorect results.
3. From the docs - 'user-event is a companion library for Testing Library that provides more advanced simulation of browser interactions than the built-in fireEvent method'.
   When using plain click event, we can directly use fireEvent from '@testing-library/angular'; with the advantage of not awaiting for the promise and having fewer imports. fireEvent.click(select)