How to pick an option in a v-select with Vue Testing Library?

[julisch94]

Hello! I want to fill out a form in my test and then submit the form to see if the validation rules work correctly and if the redirect after the form validation works as expected.

I need help selecting an option in my v-select there.

I'm using Vue Testing Library and Vitest, and I'm trying to do this:

it('redirects to checkout if all data is entered', async () => {
    const screen = render(FormComponentVue, {
      global: {
        plugins: [vuetify]
      }
    })
    const user = userEvent.setup()

    // HERE I WANT TO SELECT AN OPTION!
    const show = screen.getByRole('button', { name: 'Show' })
    await user.click(show)
    screen.debug(undefined, Infinity) // the options don't load here, they're not visible

    // ASSERTIONS
    ...
  })

In my vue component, I have this v-select:

    <v-select
      label="Show"
      v-model="myStore.selectedShowId"
      :rules="[required]"  // which is !!value || 'Mandatory field'
      :items="selectableShows"
    ></v-select>

what didn't work so far

• the v-select is not displayed with role options or listbox
• I can't see the options in screen.debg(), even though I click() on the dropdown
• There is no combobox field, it is simply a button.

[julisch94]

I finally found the solution to my own answer.

I was correctly trying to click on the dropdown by using screen.getByRole('button', {name:'Show'}). However, there was always an error message saying:

ReferenceError: ResizeObserver is not defined

Because of that it couldn't open the dropdown.

Everything was working as expected, as soon as I mocked global.ResizeObserver using this article. Here's a full example for anyone facing the same issue:

describe('MyComponent', () => {
  beforeAll(() => {
    global.ResizeObserver = class ResizeObserver {
      observe() {
        // do nothing
      }
      unobserve() {
        // do nothing
      }
      disconnect() {
        // do nothing
      }
    }
  })

  it('selects option in dropdown', async () => {
    const screen = render(MyComponentVue, {
      global: {
        plugins: [vuetify]
      }
    })
    const user = userEvent.setup()
  
    await user.click(screen.getByLabelText('Label'))
    const dropdown = screen.getByRole('listbox')

    // select number 15 in dropdown
    await user.click(within(dropdown).getByText(15))

    // BONUS: you can even click outside to close the dropdown
    await await user.click(screen.container)

    // ASSERTIONS ...
  })

})