vueTestUtils测试vue-router

测试vue-router

Vue Router是官方客户端路由库。如果要给Vue应用程序添加客户端路由，你会用到Vue Router。因此，学习测试使用了Vue Router的应用程序是很有必要的。

测试路由属性

当Vue Router被安装到Vue上时，它会添加两个实例属性：$route属性和$router属性。这些属性应该带有一个巨大的警告标志，因为它们可能会在测试中造成很多问题。

测试$route属性

如果组件使用了$route实例属性，则该属性将成为组件的依赖项。当测试具有依赖关系的组件时，你需要模拟依赖关系以防止发生错误。

我们可以使用Vue Test Utils中的mocks挂载选项，将其添加为测试中的实例属性。

import {shallowMount} from '@vue/test-utils';
test('render id param',()=>{
    const wrapper = shallowMount(TestComponent,{
        mocks:{
            $route:{
                params:{
                    id:123
                }
            }
        }
    });
    expect(wrapper.text()).toContain('123');
});
test('dispaches fetchListData width params.type',async () => {
    expect.assertins(1);
    const store = createStore();
    store.dispatch = jest.fn(()=> {
        return Promise.resolve();
    });
    const type = 'a type';
    const mocks = {
        $route:{
            params:{
                type
            }
        }
    }
    createWeapper({store,mocks});
    await flushPromses();
    expect(store.dispatch).toHaveBeenCalledWith('fetchListData',{type});
});

测试$router属性

$router是一个路由实例，它包含了以编程方式控制路由的辅助方法。由于$router是一个实例属性，因此你可以使用Vue Test Utils的mocks挂载项在测试中控制$router的值。

test('call $router.replace',async ()=>{
    expect.assertions(1);
    const store = createStore({
		getters:{
            maxPageL()=> 5
        }
    });
    const mocks = {
        $route:{
            params:{
                page:'1000'
            }
        },
        $router:{
            replace:jest.fn()
        }
    }
    createWrapper({mocks,store});
    await flushPromises();
   // 断言$router.replace被正确的参数调用 expect(mocks.$router.replace).toHaveBeenCallWith('/top/1');
});