Question

我正在尝试使用vee-validate和vue-test-utils测试验证是否适用于表单。我还使用nuxt并创建了一个自定义插件，该插件安装vee-validate并提供两个自定义计算属性作为mixin。

问题是我需要一种在localVue实例中使用这些mixins的方法，但是，我不能仅导入整个文件，因为它会导致在主vue实例上两次安装vee-validate。我也不能只说localVue.use（MyCustomVeeValidatePlugin），因为该插件没有安装方法（nuxt中的“插件”与vue中的有所不同）。

有效的方法是创建一个文件，该文件导出isFormValid和isFormChanged，然后让插件导入这些方法。然后，我还需要将这些方法导入测试文件中，并为localVue实例创建一个mixin。我宁愿在单个插件文件中定义mixin。我知道这很具体，但是有人遇到过类似的问题吗？我可以想象重写插件，使其更像是Vue.js文档中定义的插件（具有安装方法）并以某种方式安装。

插件：

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);
    }
  }
});

Answer 1

据我所知，根据我在“测试VueJs应用程序（https://www.manning.com/books/testing-vue-js-applications）中阅读的建议，作者，也是vue-test-utils的主要作者，建议：

我已经讲过为什么您应该使用localVue构造函数并避免在基本构造函数上进行安装。这对于Vue路由器尤其重要。始终在测试中使用localVue安装Vue路由器。您必须确保测试套件中没有文件导入使用Vue Router调用Vue.use的文件。意外导入包含Vue.use的文件很容易。即使您不运行模块，也可以导入模块，然后评估其中的代码。

基于该建议，我将Vue.use（）调用从store.js和router.js之类的文件中移出，移到main.js中，该文件在测试过程中未使用。

Vue-Test-Utils使用Mixin在Nuxt中进行vee验证

1 个答案: