тестовый компонент vuejs со свойствами внутри родительского элемента

Я тестирую пользовательский компонент с помощью vue test utils и Jest. Мой компонент использует компонент Vuetify, поэтому мне нужно объявить div с атрибутом data-app, чтобы отобразить меню (если я этого не сделаю, я получаю следующую ошибку:

wrapper = mount(MyComponent,  {
  propsData: {
    value: 1
}});

[Vuetify] Не удалось найти цель [data-app]

Если бы мой компонент не использовал никаких свойств, я бы сделал так:

wrapper = mount(Vue.extend({
    template: `<div data-app="true"><MyComponent /></div>`,
}), {
    attachToDocument: true
});

Но тогда я не могу установить свойства компонента, не так ли?

Поэтому я подумал об использовании свойства parentComponent следующим образом:

const parent = {
    template: `<div data-app="true"><MyComponent /></div>`,
};

wrapper = mount(MyComponent,  {
    parentComponent: parent,
    propsData: {
        value: 1'
    }});

Но это тоже не работает.

Есть ли способ проверить мой компонент?


javascript jestjs vue.js vue-test-utils
person jaudo    schedule 22.06.2019    source источник
comment
Какие свойства вы хотите передать своему MyComponent?   -  person acdcjunior    schedule 23.06.2019
comment
Любая опора... В моем примере есть одна опора с именем value   -  person jaudo    schedule 23.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Решение, которое я нашел, заключалось в том, чтобы не использовать parentComponent, а определить специальный компонент для тестирования. Например, если мой компонент имеет 2 реквизита prop1 и prop2

wrapper = mount(Vue.extend({
    template: `<div data-app="true"><MyComponent :prop1=prop1 :prop2=prod2 /></div>`,
}), {
    attachToDocument: true,
    props: ['prop1', 'prop2'],
    propsData: ['value1', 'value2']
});
person jaudo    schedule 24.06.2019