vuejs 测试组件在父元素内的属性答案

【问题标题】：vuejs test component with properties inside parent elementvuejs 测试组件在父元素内的属性
【发布时间】：2019-11-05 05:46:47
【问题描述】：

我正在使用 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'
    }});

但它也不起作用。

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

【问题讨论】：

您想将哪些属性传递给您的MyComponent？
任何道具...在我的示例中，有一个名为“值”的道具

标签： javascript vue.js jestjs vue-test-utils

【解决方案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']
});

【讨论】：