Unit testing vue component containing vuetify

Question

For example, how to trigger a change event in v-autocomplete inside your component, so that I

I tried something like:

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

Any hints? TIA.

input is an event. I suppose you want to capture it inside a parent component. Did you try ac.vm.$emit("input", valueOfTheInput); instead of ac.trigger("input"); ? — Lyokolux
– Lyokolux, Commented Apr 19, 2020 at 22:42
Also it is written trigger("input") in your code but you write "a change event" in your explanation. What event is it exactly ? — Lyokolux
– Lyokolux, Commented Apr 19, 2020 at 22:44
ac.vm.$emit("change") worked! sorry for the mix up in the example i wrote on the post. Thank you! — SuwekongHilaw
– SuwekongHilaw, Commented Apr 20, 2020 at 7:29

Lyokolux · Accepted Answer · 2020-04-20 10:19:04Z

1

trigger() is only used to trigger event inside the component. Since here we want to check the behaviour on an event emitted by a child, we need to emit the event to the parent component. So this will do the job :

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

edited Apr 20, 2020 at 10:19

answered Apr 20, 2020 at 9:58

Lyokolux

1,4452 gold badges18 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unit testing vue component containing vuetify

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related