vuejs test component with properties inside parent element

user_2542165 0
Viewed 1075

I'm test a custom component with vue test utils and Jest. My component uses Vuetify component, and so I need to declare a div with data-app attribute, in order to have the menu rendered (if I dont, I get the following error :

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

[Vuetify] Unable to locate target [data-app]

If my component didn't use any properties, I would do like this:

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

But, then, I can't set component properties, can I?

So I thought about using parentComponent property like this:

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

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

But it does not work either.

Is there any way to test my component?

vue-test-utils vue.js jestjs javascript
1 Answers

The solution I found was not to use parentComponent, but define an ad hoc component for testing. For example if my component has 2 props prop1 and prop2

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