Testing Vuetify (Vue.js) - Second Call On Mount Throws Error

I am currently experiencing a behaviour when testing my Vue Application (specifically when vuetify is included). I am using Jest as Test Runner but experienced the same behaviour w

Solution 1:

The bad news

Turns out this is indeed a bug in vue-test-utils at the moment. After I opened up issues I discovered another issue with a problem pretty similar to mine and I'm pretty sure the root cause for this is the same as in my case. Apperently this is due to a change that happend in the vue utils in v.beta.29

The issue can be found here #1130

The good News

There is a workaround to get your tests working again until this bug is resolved. You need to mount with the option sync: false so mounting in the top example would look like

const wrapper = mount(PermissionTable, {
  localVue,
  vuetify,
  propsData: {
    value: tableItems
  },
  sync: false
});

I still think this is a serious bug as identical tests should behave in the same way every time you run them no matter the settings. I will update this post as soon as there is news that this has been addressed.

Solution 2:

The only thing that seems out of place in your first piece of code is that you are writing Vue.use(Vuetify) and also using an instance of Vuetify when doing mount.

I suggest that you keep the Vue.use(Vuetify) and mount your component like this:

const wrapper = mount(PermissionTable, {
   localVue,   // vuetify is removed from this object
   propsData: {
     value: tableItems
   }
});

On a side note, unit tests generally should use shallowMount. I am not aware of your use case, but, if possible, please use it instead of mount