Versions

Test utils

1.0.3

Vue

2.6.11

Vue router

3.20

Vue compsotion API

1.0.0-beta.8

I have some difficulties developing a component test because of root.$route.

In the component, I have a watch, which will be aware when the route changes, in order to change some variables of the component.

My component

<script>
export default {
    setup ( _, { root }) {
       // behavior
       ...
        watch( () => root.$route,
            ({ query, meta }) => {
               foo = 'bar';
            }, {
                immediate: true
            });
    }
};
</script>

My test

import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI from '@vue/composition-api';
import Component from '@/components/bundles/layout/Component';
import router from '@/router/';

const localVue = createLocalVue();
localVue.use( VueCompositionAPI );
localVue.use( router );

describe( 'Component', () => {
    it( 'Insert', () => {
        const wrapper = shallowMount( Component, {
            mocks: {
                $t: () => ({})
            },
            localVue,
            router
        });

        console.log( wrapper.html() );
    });
});

Error

TypeError: Cannot destructure property 'query' of 'undefined' as it is undefined.

I've tried to mock the router, but without effect.

I tried in the following ways:

1:

...

describe( 'Component', () => {
    it( 'Insert', () => {
        const wrapper = shallowMount( Component, {
            mocks: {
                $t: () => ({}),
                $route: { query: '', meta: '' }
            },
            localVue,
            router
        });

        console.log( wrapper.html() );
    });
});

2:

import router from '@/router/';

jest.mock( '@/router/', () => ({
    currentRoute: {
        meta: {},
        query: {}
    },
    push: jest.fn( () => Promise.resolve() )
}) );

Some help?