Vue-test-utils using mixin for vee-validate in nuxt

Question

I'm trying to test if validation works for a form with vee-validate and vue-test-utils. I also use nuxt and have created a custom plugin which install vee-validate and provides two custom computed properties as a mixin.

The problem is that I need a way to use these mixins within a localVue instance, however, I cannot just import the whole file as it results in vee-validate being installed two times on the main vue instance. I also cannot just say localVue.use(MyCustomVeeValidatePlugin) because the plugin doesn't have an install method ("plugins" in nuxt are somewhat different than in vue).

What works is creating a file which exports isFormValid and isFormChanged and then have the plugin import these methods. Then I also need to import these methods in the test file and create a mixin for the localVue instance. I would much rather prefer defining the mixin in a single plugin file. I know this is very specific but has anyone had a similar problem? I could imagine rewriting the plugin to be more like it is defined in the Vue.js docs (with an install method) and install it somehow.

Plugin:

import Vue from "vue";
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);

//create global mixin for checking if form is valid
//note: every input element needs a name
Vue.mixin({
  computed: {
    isFormValid() {
      return Object.keys(this.fields).every(key => 
      this.fields[key].valid);
    },
    isFormChanged() {
      return Object.keys(this.fields).some(key => 
      this.fields[key].changed);
    }
  }
});

Does calling Vue.use(VeeValidate) twice actually cause any problems in the tests? — chrismarx
It just says [Vue warn]: The computed property "errors" is already defined in data. and [Vue warn]: The computed property "fields" is already defined in data. This doesn't cause any errors or anything in the tests, but not sure on how the vue instance is affected by this. The thing is even if I decide to ignore the warnings it is installed on the global Vue instance not localVue which is a much bigger problem @chrismarx — Alex Gogl

chrismarx chrismarx · Accepted Answer · 2019-01-24T17:56:12

As far as I know, based on the recommendations I read in "Testing VueJs Applications (https://www.manning.com/books/testing-vue-js-applications), the author, who is also the main author of the vue-test-utils recommends:

I’ve already spoken about why you should use a localVue constructor and avoid installing on the base constructor. This is especially important for Vue Router. Always use a localVue to install Vue Router in tests. You must make sure that no file in your test suite imports a file that calls Vue.use with Vue Router. It’s easy to accidentally import a file that includes Vue.use. Even if you don’t run a module, if the module is imported, then the code inside it will be evaluated.

Based on that recommendation, I moved Vue.use() calls out of files like store.js and router.js and into main.js, which isn't used during testing.

Vue-test-utils using mixin for vee-validate in nuxt

1 Answers