Question

我有一个实现v-autocomplete但有一个template带插槽的组件，而不是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>

现在，我想用Jest测试此组件，但无法终生。有趣的是，我可以看到呈现的autocomplete元素。我试图像这样设置自动完成的输入：

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

但是没有用。我最终这样做：

wrapper.vm.search = 'Foo'

如果这样做，我可以看到在html中设置了模拟项：

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

，并且autocomplete属性更改为searchinput="Foo"，但是模板不存在，就像没有呈现一样。因此，基本上，我无法测试整个下拉菜单功能，因为它不存在。

有什么想法吗？

Answer 1

答案是我需要安装组件而不是浅层安装。似乎v-autocomplete需要获取其他一些Vuetify组件（例如v-select），并且通过浅入式安装，我们可以防止使用这些依赖项。

带插槽的单元测试Vuetify v-autocomplete

1 个答案: