Vue Unit Testing + F7 Toast?

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?

1 Like