Question

我正在用vue test utils和Jest测试一个自定义组件。我的组件使用Vuetify组件，因此我需要声明一个具有data-app属性的div，以便呈现菜单（如果不显示，则会出现以下错误：

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'
    }});

但是它也不起作用。

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

Answer 1

我发现的解决方案不是使用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']
});

vuejs测试组件，其父元素内具有属性

1 个答案: