单元测试包含 vuetify 的 vue 组件答案

【问题标题】：Unit testing vue component containing vuetify单元测试包含 vuetify 的 vue 组件
【发布时间】：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") 工作！抱歉，我在帖子上写的示例中混淆了。谢谢！

标签： unit-testing vue.js jestjs vuetify.js

【解决方案1】：

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

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

【讨论】：