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

Question

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

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 个道具 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测试组件

vuejs test component with properties inside parent element

javascript

vue.js

jestjs

vue-test-utils