Можно ли передать переменные плагина из parentComponent дочернему элементу в качестве реквизита в функции shallowMount vue-test-utils - PullRequest
Новая
       34

Можно ли передать переменные плагина из parentComponent дочернему элементу в качестве реквизита в функции shallowMount vue-test-utils

1 голос
/ 01 ноября 2019

Я создаю тестовую среду для компонента, который я построил в Vue. Компонент ожидает в качестве подпорки объект, который вычисляется с помощью плагина vue на родительском элементе этого компонента. (в частности, объект $v, который вычисляется плагином vuelidate)

Мой подход к тестированию заключался в использовании свойства parentComponent и propsData аргумента options vue-test-utils 'shallowMount, но я не могу понять, как передать переменную из родительского объекта в подпорки компонента.

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?

1 Ответ

0 голосов
/ 04 ноября 2019

Помимо того, что я не рекомендую проверять более одного компонента в одном тестовом примере (а я рекомендовал бы смоделировать значение $ v напрямую без родителя, потому чтовам следует протестировать один модуль в одном тестовом файле, в вашем случае FormField, и вам не нужно беспокоиться о том, как работает родительский компонент, в данном случае, просто тестируйте FormField и TextField по одному)

Как бы то ни было, у меня есть некоторые идеи, почему это не работает:

  1. попытаться импортировать реальный родительский компонент, как в этом примере

  2. попытаться отладить и получить родительский доступ expect(wrapper.vm.$parent.$v.value).toBe('foo')

  3. вы объявляете это 

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

и после этого 

shallowMount(FormField)

возможно, что-то сбивает с толку

Вот и все, извините, у меня нет четкого решения, но, возможно, что-то поможет вам (все же рекомендую тестировать компоненты отдельно)

...