Using vue-test-utils. Simple spec setup for a login page which shows a $f7.toast message if authentication fails. Running the tests always results in the message
console.error src/pages/login.vue
TypeError: cannot read property ‘toast’ of null.
The calling error line in the source is
this.toastCenter = this.$f7.toast.create({
text: e.message,
position: 'center',
closeTimeout: 2000,
});
According to https://vue-test-utils.vuejs.org/guides/#applying-global-plugins-and-mixins and https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#mocking-global-objects, I should be able to mock $f7 and a ‘toast.create’ function.
So I’ve tried mocking it like this:
const toast = {
text: null,
create: (ob) => {
this.text = ob.text || null;
},
};
mount(Login.vue, { mocks: { $f7: { toast } } })
but that results in a message:
[vue-test-utils]: could not overwrite property $f7, this is usually caused by a plugin that has added the property as a read-only value
I’ve tried other approaches as well, but they all fail. Does anyone have a working solution on how I can mock the this.$f7.toast.create()
function using vue-test-utils?