Vue.js unit test child emit calls parent function - unit-testing

Question

I am a little puzzled I am trying to unit test a child (ratingsItem component) emitting to a parent component. Here is the test code:
it("rating component should emit call to parent updateRating function", () => {
const wrapper = factory({});
const ratingComp = wrapper.find({ref: "ratings"});
ratingComp.vm.$emit("updateRating", 1);
expect(wrapper.emitted().updateRating).toEqual(1);
expect((wrapper.vm as any).updateRating).toHaveBeenCalled();
});
This is the code inside the parent component. You can see the ratingsItem component inside it:
<template>
<div>
<div class="overlay" v-show="isModalOpen" #click="closeModal"></div>
<div ref="modal" class="modal" v-show="isModalOpen">
<div slot="header" class="modal_header">
<div class="modal_header_title">{{headerTitle}}</div>
<div #click="closeModal" class="modal_header_close">
<img src="../assets/modal_close_icon.svg" />
</div>
</div>
<div>
<label>Restaurant Rating</label>
<!-- rating component -->
<ratingsItem ref="ratings" :rating="rating" :starSizePerc="12" #updateRating="updateRating"></ratingsItem>
</div>
<!-- footer -->
<button class="pointer cancel_btn" #click="closeModal">Cancel</button>
<button class="pointer space_left save_btn" #click="submitDetails()">Save</button>
</div>
</div>
</template>
But when I run the test I get this error:
expect(received).toEqual(expected) // deep equality
Expected: 1
Received: undefined
71 |
72 |
> 73 | expect(wrapper.emitted().updateRating).toEqual(1);
| ^
74 | // expect((wrapper.vm as any).updateRating).toHaveBeenCalled();
75 | });
76 | });
Can anyone help?

Answer 1

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

Answer 2

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 :)