[Vuejs]-Vue.js unit test child emit calls parent function

by

0👍

I checked vue-test-utils docs for ’emitted’:
https://vue-test-utils.vuejs.org/api/wrapper/emitted.html

Can you try to wrap it in vm.$nextTick:

it("rating component should emit call to parent updateRating function", (done) => {
    const wrapper = factory({});
    const ratingComp = wrapper.find({ref: "ratings"});
    ratingComp.vm.$emit("updateRating", 1);
    wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted().updateRating).toEqual(1);
       expect((wrapper.vm as any).updateRating).toHaveBeenCalled();
       done()
    })
  });

0👍

I figured it out this is what I used below:

it("rating  component should emit call to parent updateRating function", () => {
    const wrapper = factory({});
    const updateRating = jest.fn();
    wrapper.setMethods({ updateRating });
    wrapper.find({ ref: "ratings" }).vm.$emit("updateRating", { idx: 9 });
    expect(updateRating).toHaveBeenCalled();
    expect(updateRating).toHaveBeenCalledWith({ idx: 9 });
  });

Thanks for your help with this 🙂

Leave a comment