单元测试包含 vuetify 的 vue 组件

Posted 2023-02-22

【中文标题】单元测试包含 vuetify 的 vue 组件

【英文标题】：Unit testing vue component containing vuetify

【发布时间】：2020-08-02 05:58:37

【问题描述】：

例如，如何在你的组件内部触发 v-autocomplete 中的 change 事件，以便我

我尝试了类似的方法：

import SomethingAutocomplete from "@/components/SomethingAutocomplete.vue";
import  shallowMount  from "@vue/test-utils";
import  VAutocomplete  from "vuetify/lib";
import  Constructor  from "vue/types/options";

test("Some test", async () => 
  const wrapper = shallowMount(SomethingAutocomplete);
  let ac = wrapper.find(<Constructor>VAutocomplete);
  ac.trigger("input");
  await wrapper.vm.$nextTick();
  ...
  <handler was never called>
);

有什么提示吗？ TIA。

【问题讨论】：

输入是一个事件。我想您想在父组件中捕获它。你试过ac.vm.$emit("input", valueOfTheInput); 而不是ac.trigger("input"); 吗？

在您的代码中也写了trigger("input")，但您在解释中写了“更改事件”。究竟是什么活动？

ac.vm.$emit("change") 工作！抱歉，我在帖子上写的示例中混淆了。谢谢！

【参考方案1】：

trigger() 仅用于触发组件内部的事件。由于这里我们要检查子组件发出的事件的行为，因此我们需要将事件发送到父组件。 所以这将完成这项工作：

ac.vm.$emit("input", valueOfTheInput);