Vue test utils: how to setProps if they are used in mounted()

Question

I'm using jest / vue-test-utils to test a component, and I can't find a way to set props if they are used in mounted().

The component has one prop queryFilter: { type: Object } which is used within the mounted() hook.

My test looks like this:

import { mount } from '@vue/test-utils'
import Filter from '../../src/components/Filter.vue'
test('basic fail', async () => {
     const filter = mount(Filter);   
     await Filter.setProps({
        propsData: { queryFilter: { "foo": "bar" } }
    });
    expect(filter.vm.queryFilter).toEqual({ "foo": "bar" });
});

The error I get suggests that I tried to mount, triggering the mounted() hook, but props were not yet passed because setProps is called in the next line.

 TypeError: Cannot convert undefined or null to object
        at Function.keys (<anonymous>)
    > 75 |       let tables = Object.keys(this.queryFilter);

Of course, if I swap the two lines

     await Filter.setProps({
        propsData: { queryFilter: { "foo": "bar" } }
    });
    const filter = mount(Filter);

then I get TypeError: _Filter.default.setProps is not a function. Obviously.

Is there any way to use vue test in this case?

floriankapaun · Accepted Answer · 2022-11-25 16:56:52Z

1

You could directly pass the props when mounting your component.

Example:

import { mount } from '@vue/test-utils'
import Filter from '../../src/components/Filter.vue'

test('basic fail', async () => {
    const filter = mount(Filter, {
        props: {
            queryFilter: { "foo": "bar" }
        }
    });   
    expect(filter.vm.queryFilter).toEqual({ "foo": "bar" });
});

For further details check out the docs.

answered Nov 25, 2022 at 16:56

floriankapaun

8691 gold badge9 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue test utils: how to setProps if they are used in mounted()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related