如何使用 vitest 和 vue-test-utils 测试 Vuetify 3 select？

Question

我在表单中有一个 v-select，我想用 vitest 和 vue-test-utils 进行测试。

<v-select
  clearable
  :items="models"
  item-value="id"
  item-text="name"
  ref="model-select"
  required="true"
  v-model="selectedModel"
></v-select>

我尝试用我在here找到的两种方法来测试它。带注释的代码是一种方法，未注释的代码是第二种方法。

test('it fills the form', async () => {
    models = [
      {
        id: '1',
        name: 'foo',
      },
      {
        id: '2',
        name: 'bar',
      },
    ];
    await nextTick();
    // const select = wrapper?.findComponent({ref: 'model-select'});
    // expect(select?.exists()).toBeTruthy();
    // select?.vm.selectItem('foo');
    // await nextTick();

    wrapper?.find('[data-testid="model-select"]').trigger('click');
    await nextTick();
    wrapper?.find('.menuable__content__active')?.findAll('.v-list-item')?.at(0)?.trigger('click');
    await nextTick();
  });

我似乎找不到正确的解决方案，DOM 包装器要么不知道选择项目的方法（第一种方法），要么是空的，因为它找不到 vuetify 选择菜单（第二种方法）

有人遇到同样的问题并找到适合我使用的软件包的解决方案吗？

Answer 1

我找到了答案。您无法访问底层 html 的值，而是访问组件实例并获取值

import { mount } from '@vue/test-utils'
describe('my test', () => {
 wrapper = mount(MySelect)
 test('it fills the form', async () => {
   models = [
    { id: '1', name: 'foo' },{ id: '2', name: 'bar',},
   ];

   const component = wrapper.findComponent('[data-testid="model-select"]')
   await component.setValue(models[0])
   console.log('new value', component.vm.modelValue)
})

我花了几天时间尝试解决同样的错误。我希望我有所帮助。 问候！