如何测试一个 vue vuetify v-autocomplete

Posted 2023-02-22

【中文标题】如何测试一个 vue vuetify v-autocomplete

【英文标题】：How to test a vue vuetify v-autocomplete

【发布时间】：2021-05-24 13:03:27

【问题描述】：

不知何故，在测试期间我无法在 html 中看到 items 的 v-autocomplete 并且设置项目也不起作用。在v-autocomplete（正在加载挂载的项目）和测试下方。

// 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>

测试看起来像这样：

//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
    
  );
);

测试expect(getByText(wrapper.element, item.name)).toBeTruthy(); 将失败并显示消息Unable to find an element with the text。同样使用console.log(wrapper.html()) 打印html 不会显示v-autocomplete 的项目。所以我的问题是：

如果项目已加载，我该如何测试？ 如何将已加载的一项设置为v-autocomplete 的选定项？

【参考方案1】：

您可以在点击.v-input__slot 时打开自动完成菜单。我不认为，最好的做法是测试库功能。

单元测试：

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();
  
);

来源： https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/\_\_tests__/VSelect.spec.ts

【讨论】：

v-autocomplete 是表单的一部分，并且项目是从外部源加载的。要提交表单，我必须选择其中一个值。因此我需要知道是否加载了某些内容。

不幸的是，提供的解决方案对我不起作用。我可以找到带有.findAll('.v-input__slot') 的元素并触发点击。但是html没有更新。

你能添加你的 package.json 吗？我将使用您的依赖项调整更多测试。因为，在 console.log(wrapper.html()) 中，我可以看到菜单项。问题也可能在于模拟项目。安装后尝试 console.log(this.items)。