How to test a vue vuetify v-autocomplete - vue.js

Question

Somehow I'm not able to see the items of the v-autocomplete inside the html during the test and also setting an item does not work. Below the v-autocomplete (which is loading the items on mount) and the test.
// v-autocomplete.vue
<template>
<v-autocomplete
:items="items"
item-text="name"
item-value="id"
></v-autocomplete>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
mounted() {
service.getItems().then((response) => {
this.items = response;
});
},
};
</script>
The test looks like this:
//v-autocomplete.spec.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import VAutocomplete from '#/components/v-autocomplete.vue';
import '#testing-library/jest-dom';
import { createLocalVue, mount } from '#vue/test-utils';
import service from '#/service/service';
Vue.use(Vuetify);
const items= [
{ name: 'Item 1', id: 1 },
{ name: 'Item 2', id: 2 },
];
const getItemsSpy = jest
.spyOn(service, 'getItems')
.mockImplementation(() => {
return new Promise((resolve) => {
resolve(items);
});
});
describe('v-autocomplete.vue', () => {
let localVue;
let vuetify;
let wrapper;
beforeEach(() => {
jest.clearAllMocks();
localVue = createLocalVue();
vuetify = new Vuetify();
});
it('should load the items', async () => {
wrapper = mount(VAutocomplete, {
localVue,
vuetify,
propsData: {},
});
expect(getItemsSpy).toBeCalledTimes(1);
for (const item of items) {
expect(getByText(wrapper.element, item.name)).toBeTruthy(); // Will fail -> Unable to find an element with the text
}
});
});
The test expect(getByText(wrapper.element, item.name)).toBeTruthy(); will fail with the message Unable to find an element with the text. Also printing the html with console.log(wrapper.html()) does not show the items of the v-autocomplete. So my question would be:
How could I test, if the items were loaded?
How could I set one of the loaded as the selected item of the v-autocomplete?

Answer 1

You can open autocomplete menu on click .v-input__slot. I do no think, it is best practice to test library functionality.
Unit test:
it("should load the items", async () => {
wrapper = mount(VAutocomplete, {
localVue,
vuetify,
propsData: {}
});
const autocomplete = wrapper.element;
const autocompleteControls = autocomplete.find(".v-input__slot");
autocompleteControls.trigger("click");
await wrapper.vm.$nextTick();
expect(getItemsSpy).toBeCalledTimes(1);
for (const item of items) {
expect(getByText(wrapper.element, item.name)).toBeTruthy();
}
});
Source:
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/\_\_tests__/VSelect.spec.ts