Unit test Vuetify v-autocomplete with slots

Question

I have a component that implements v-autocomplete but has a template with slots instead of the default drop-down menu generated by Vuetify.

 <v-autocomplete
      :items="searchResults"
      :multiple="true"
      :search-input.sync="search"
      hide-no-data
      :loading="loading"
      item-text="name"
      item-value="id"
      label="Search"
      clearable
      data-qa="search-input">
      <template
        slot="item"
        slot-scope="data">
         .... divs and other stuff
      </template>

Now I want to test this component with Jest, but cannot for the life of me. Funny thing is, I can see the autocomplete element being rendered. I tried to set the input of the autocomplete like so:

wrapper.find('[data-qa="search-input"]').setValue('Foo');

but it didn't work. I ended up doing this:

wrapper.vm.search = 'Foo'

If I do this, I can see the mock items being set in the html:

items = "[object Object],[object Object],[object Object]"

and the autocomplete attribute changing to searchinput="Foo", but the template is not there, like it's not being rendered. So basically, I cannot test the whole drop down menu functionality because it's not there.

Any ideas?

Iulia Mihet Iulia Mihet · Accepted Answer · 2019-02-21T15:05:38

The answer was that I needed to mount the component instead of shallow mounting it. It seems that v-autocomplete needs to grab some other Vuetify components (like v-select) and by shallow mounting, we prevent these dependencies to be used.

Unit test Vuetify v-autocomplete with slots

1 Answers