# 配合 Vue Router 使用 ## 在测试中安装 Vue Router 在测试中,你应该杜绝在基本的 Vue 构造函数中安装 Vue Router。安装 Vue Router 之后 Vue 的原型上会增加 `$route` 和 `$router` 这两个只读属性。 为了避免这样的事情发生,我们创建了一个 `localVue` 并对其安装 Vue Router。 ```js import { shallow, createLocalVue } from '@vue/test-utils' import VueRouter from 'vue-router' const localVue = createLocalVue() localVue.use(VueRouter) shallow(Component, { localVue }) ``` ## 测试使用了 `router-link` 或 `router-view` 的组件 当你安装 Vue Router 的时候,`router-link` 和 `router-view` 组件就被注册了。这意味着我们无需再导入可以在应用的任意地方使用它们。 当我们运行测试的时候,需要令 Vue Router 相关组件在我们挂载的组件中可用。有以下两种做法: ### 使用存根 ```js import { shallow } from '@vue/test-utils' shallow(Component, { stubs: ['router-link', 'router-view'] }) ``` ### 为 localVue 安装 Vue Router ```js import { shallow, createLocalVue } from '@vue/test-utils' import VueRouter from 'vue-router' const localVue = createLocalVue() localVue.use(VueRouter) shallow(Component, { localVue }) ``` ## 伪造 `$route` 和 `$router` 有的时候你想要测试一个组件在配合 `$route` 和 `$router` 对象的参数时的行为。这时候你可以传递自定义假数据给 Vue 实例。 ```js import { shallow } from '@vue/test-utils' const $route = { path: '/some/path' } const wrapper = shallow(Component, { mocks: { $route } }) wrapper.vm.$router.path // /some/path ``` ## 常识 安装 Vue Router 会在 Vue 的原型上添加 `$route` 和 `$router` 只读属性。 这意味着在未来的任何测试中,伪造 `$route` 或 `$router` 都会失效。 要想回避这个问题,就不要在运行测试的时候全局安装 Vue Router,而用上述的 `localVue` 用法。