Vue：测试 utils vue 组合 - root.$route

Question

版本

---

测试工具

1.0.3

Vue

2.6.11

Vue 路由器

3.20

Vue 组合 API

1.0.0-beta.8

---

由于 root.$route，我在开发组件测试时遇到了一些困难。

在组件中，我有一个手表，它会在路由改变时感知，以便改变组件的一些变量。

我的组件

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

我的测试

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() );
    });
});

错误

<块引用>

TypeError: 无法解构 'undefined' 的属性 'query'，因为它是未定义的。

我试图模拟路由器，但没有效果。

我尝试了以下方法：

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() )
}) );

需要帮助吗？