Vue-test-utils 在 nuxt 中使用 mixin 进行 vee-validate

Posted 2023-02-22

【中文标题】Vue-test-utils 在 nuxt 中使用 mixin 进行 vee-validate

【英文标题】：Vue-test-utils using mixin for vee-validate in nuxt

【发布时间】：2019-06-16 06:08:48

【问题描述】：

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

问题是我需要一种在 localVue 实例中使用这些 mixin 的方法，但是，我不能只导入整个文件，因为它会导致在主 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);
    
  
);

【问题讨论】：

两次调用 Vue.use(VeeValidate) 是否真的会导致测试出现问题？

它只是说[Vue警告]：计算属性“错误”已经在数据中定义。和 [Vue 警告]：计算属性“字段”已在数据中定义。这不会在测试中导致任何错误或任何事情，但不确定 vue 实例如何受此影响。问题是即使我决定忽略它安装在全局 Vue 实例而不是 localVue 上的警告，这是一个更大的问题@chrismarx

【参考方案1】：

据我所知，根据我在《测试 VueJs 应用程序 (https://www.manning.com/books/testing-vue-js-applications) 中读到的建议，作者同时也是 vue-test-utils 的主要作者推荐：

我已经讲过为什么应该使用 localVue 构造函数并避免安装在基础构造函数上。这对于 Vue Router 尤为重要。始终使用 localVue 在测试中安装 Vue Router。您必须确保测试套件中的任何文件都不会导入使用 Vue Router 调用 Vue.use 的文件。很容易意外导入包含 Vue.use 的文件。即使你不运行一个模块，如果模块被导入，那么它里面的代码也会被评估。

根据该建议，我将 Vue.use() 调用从 store.js 和 router.js 等文件移到 main.js 中，在测试期间不使用该文件。