javascript - 具有父元素内部属性的vuejs测试组件

Question

我正在使用 vue test utils 和 Jest 测试自定义组件。我的组件使用 Vuetify 组件，所以我需要声明一个带有 data-app 属性的 div，以便呈现菜单(如果我不这样做，我会收到以下错误:

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

[Vuetify] Unable to locate target [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'
    }});

但它也不起作用。

有什么方法可以测试我的组件吗？

Answer 1

我找到的解决方案不是使用parentComponent，而是定义一个临时组件用于测试。例如，如果我的组件有 2 个 Prop 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']
});