Unable to mock service with nuxt and jest - vue.js

Question

I have a component called External.vue which contains a button that has props and also has a Google Analytic event fired every time it is clicked.
<template>
<div>
<button
ref="ctaButtonExternalElement"
type="submit"
#click="fireEvent"
>
<a
ref="ctaButtonExternalLinkElement"
:class="ctaColour"
class="block rounded-md border border-transparent px-4 py-3 font-medium shadow focus:outline-none focus:ring-2 focus:ring-offset-2 sm:px-6"
:href="ctaLink"
>
{{ ctaTitle }}
</a>
</button>
</div>
</template>
<script>
export default {
props: {
ctaTitle: {
required: true,
type: String,
},
ctaLink: {
required: true,
type: String,
},
ctaColour: {
required: false,
type: String,
default: 'bg-blue-500 hover:bg-blue-700 focus:ring-blue-500',
},
event: {
required: false,
type: Object,
default: function() {
return {};
},
},
},
methods: {
fireEvent() {
if (this.event != null) {
return this.$ga.event({
eventCategory: this.event.event_category,
eventAction: this.event.event_action,
eventLabel: this.event.event_label,
eventValue: this.event.event_value,
});
}
},
},
};
</script>
As you can see this.$ga is injected here by nuxt automatically and in our test we are wanting to load the component so we want to inject the $ga or rather have a mocked version of it.
import {mount} from '#vue/test-utils';
import External from './External';
import ga from '#nuxtjs/google-analytics';
import {jest} from '#jest/globals';
describe('Test External Button', () => {
test('should mock google analytics', async () => {
const $ga = {ga: {
event: jest.fn(),
}};
const wrapper = mount(External, {
propsData: props,
mocks: {
$ga,
},
});
const button = wrapper.getComponent({ref: 'ctaButtonExternalElement'});
button.trigger('click');
expect($ga).toHaveBeenCalled();
});
});
when I run this test I get this error:
Test External Button › should mock google analytics
expect(received).toHaveBeenCalled()
Matcher error: received value must be a mock or spy function
Received has type: object
Received has value: {"ga": {"event": [Function mockConstructor]}}
Error in v-on handler: "TypeError: this.$ga.event is not a function"
Is there anyway of mocking $ga?

Answer 1

Your mock looks incorrect. $ga has no ga property, so that should be removed from the mock.
//const $ga = {ga: {
// event: jest.fn(),
//}};
const $ga = {
event: jest.fn(),
};
And you'd verify $ga.event is called, not $ga. Also the click-event trigger should be awaited, as the click-handler isn't called until the next tick:
//button.trigger('click');
//expect($ga).toHaveBeenCalled();
await button.trigger('click');
expect($ga.event).toHaveBeenCalled();