是否可以将插件变量从父组件传递给子组件作为 vue-test-utils 的 shallowMount 函数中的道具答案

【问题标题】：Is it possible to pass plugin variables from a parentComponent to a child as props in vue-test-utils' shallowMount function是否可以将插件变量从父组件传递给子组件作为 vue-test-utils 的 shallowMount 函数中的道具
【发布时间】：2020-02-27 07:05:55
【问题描述】：

我正在为我在 Vue 中构建的组件构建一个开玩笑的测试环境。该组件期望一个由该组件父级上的 vue 插件计算的对象作为道具。（特别是由 vuelidate 插件计算的 $v 对象）

我的测试方法是使用 vue-test-utils 的 shallowMount 的 options 参数的 parentComponent 和 propsData 属性，但我不知道如何将变量从父级传递给组件的 props。

TextField.spec.js：

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuelidate from 'vuelidate';
import FormField from '../../../../src/components/fields/FormField.vue';

const localVue = createLocalVue();
localVue.use(Vuelidate);
localVue.component('form-field', FormField);

parent = {
  data() {
    return {
      value: 4,
    };
  },
  //this property is consumed by Vuelidate, which creates an object on localVue
  validations: {
    value: {
      required,
    },
  },
};
wrapper = shallowMount(FormField, {
  localVue,
  parentComponent: parent,
  propsData:       {
    label:          'test label',
    validatorField: $v.value,
  },
});

TextField.vue

<template>
  <label>
    {{label}}
    {{required? '*' : ''}}
  </label>
</template>
<script>
export default {
  props: {
    label: String,
    validatorField: Object,
  },
  computed: {
    required() {
      return Object.keys(this.validatorField).includes('required');
    }
  },
};
</script>

上述代码的预期结果是FormField 组件接收从父级创建的validatorField 属性，但是在我调用它的上下文中没有定义$v。我也尝试用":validatorField": "$v.value" 替换validatorField: $v.value 并传入一个函数，但没有成功。有什么方法可以正确传递这个道具吗？也许通过检索对 parentComponent 的引用？

【问题讨论】：

标签： vue.js vue-test-utils

【解决方案1】：

除了我不建议在一个测试用例中测试多个组件（我会建议你直接模拟 $v 值而不使用父级，因为你应该在一个测试文件中测试一个单元，在你的情况下是FormField，你不想担心父组件是如何工作的，不是这种情况，只需对FormField和TextField进行一一测试）

无论如何，我有一些想法为什么这不起作用：

尝试像 example 那样导入真正的父组件
尝试调试并获得父访问权限expect(wrapper.vm.$parent.$v.value).toBe('foo')
你声明这个

localVue.component('form-field', FormField);

然后

shallowMount(FormField)

也许发生了一些令人困惑的事情

仅此而已，抱歉我没有明确的解决方案，但也许有些东西会对您有所帮助（仍然建议单独测试组件）

【讨论】：