对 Vue-Router 进行单元测试的方法

    TypeError: Cannot read property ‘params’ of undefined

这是因为 $route  并不存在。 我们当然可以用一个真正的路由，但在这样的情况下只用一个 mocks  加载选项会更容易些：

it("renders a username from query string", () => {
 const username = "alice"
 const wrapper = shallowMount(NestedRoute, {
  mocks: {
   $route: {
    params: { username }
   }
  }
 })
 expect(wrapper.find(".username").text()).toBe(username)
})

这样测试就能通过了。在本例中，我们没有做任何的导航或是和路由的实现相关的任何其他东西，所以 mocks  就挺好。我们并不真的关心 username  是从查询字符串中怎么来的，只要它出现就好。

测试路由钩子的策略

Vue Router 提供了多种类型的路由钩子, 称为 “navigation guards”。举两个例子如：

全局 guards (router.beforeEach)。在 router 实例上声明
组件内 guards，比如 beforeRouteEnter。在组件中声明

要确保这些运作正常，一般是集成测试的工作，因为需要一个使用者从一个理由导航到另一个。但也可以用单元测试检验导航 guards 中调用的函数是否正常工作，并更快的获得潜在错误的反馈。这里列出一些如何从导航 guards 中解耦逻辑的策略，以及为此编写的单元测试。

全局 guards

比方说当路由中包含 shouldBustCache  元数据的情况下，有那么一个 bustCache  函数就应该被调用。路由可能长这样：

//routes.js
import NestedRoute from "@/components/NestedRoute.vue"
export default [
 {
  path: "/nested-route",
  component: NestedRoute,
  meta: {
   shouldBustCache: true
  }
 }
]

之所以使用 shouldBustCache  元数据，是为了让缓存无效，从而确保用户不会取得旧数据。一种可能的实现如下：

//router.js
import Vue from "vue"
import VueRouter from "vue-router"
import routes from "./routes.js"
import { bustCache } from "./bust-cache.js"
Vue.use(VueRouter)
const router = new VueRouter({ routes })
router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.shouldBustCache)) {
  bustCache()
 }
 next()
})
export default router

在单元测试中，你可能想导入 router 实例，并试图通过 router.beforeHooks[0]()  的写法调用 beforeEach；但这将抛出一个关于  next  的错误 — 因为没法传入正确的参数。针对这个问题，一种策略是在将 beforeEach  导航钩子耦合到路由中之前，解耦并单独导出它。做法是这样的：