對 Vue-Router 進行單元測試的方法

來源：懂視網責編：小采時間：2020-11-27 22:04:29

對 Vue-Router 進行單元測試的方法

對 Vue-Router 進行單元測試的方法:由于路由通常會把多個組件牽扯到一起操作，所以一般對其的測試都在端到端/集成階段進行，處于測試金字塔的上層。不過，做一些路由的單元測試還是大有益處的。對于與路由交互的組件，有兩種測試方式：使用一個真正的 router 實例 mock 掉 $route

推薦度：

點擊下載本文 文檔為doc格式

導讀對 Vue-Router 進行單元測試的方法:由于路由通常會把多個組件牽扯到一起操作，所以一般對其的測試都在端到端/集成階段進行，處于測試金字塔的上層。不過，做一些路由的單元測試還是大有益處的。對于與路由交互的組件，有兩種測試方式：使用一個真正的 router 實例 mock 掉 $route

來更新一下 <NestedRoute>：

<template>
 <div>
 Nested Route
 <div class="username">
 {{ $route.params.username }}
 </div>
 </div>
</template>

現在報錯變為了：

tests/unit/NestedRoute.spec.js
NestedRoute
✕ renders a username from query string (17ms)

● NestedRoute › renders a username from query string

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 導航鉤子耦合到路由中之前，解耦并單獨導出它。做法是這樣的：

//router.js

export function beforeEach((to, from, next) {
 if (to.matched.some(record => record.meta.shouldBustCache)) {
 bustCache()
 }
 next()
}

router.beforeEach((to, from, next) => beforeEach(to, from, next))

export default router

再寫測試就容易了，雖然寫起來有點長：

import { beforeEach } from "@/router.js"
import mockModule from "@/bust-cache.js"

jest.mock("@/bust-cache.js", () => ({ bustCache: jest.fn() }))

describe("beforeEach", () => {
 afterEach(() => {
 mockModule.bustCache.mockClear()
 })

 it("busts the cache when going to /user", () => {
 const to = {
 matched: [{ meta: { shouldBustCache: true } }]
 }
 const next = jest.fn()

 beforeEach(to, undefined, next)

 expect(mockModule.bustCache).toHaveBeenCalled()
 expect(next).toHaveBeenCalled()
 })

 it("busts the cache when going to /user", () => {
 const to = {
 matched: [{ meta: { shouldBustCache: false } }]
 }
 const next = jest.fn()

 beforeEach(to, undefined, next)

 expect(mockModule.bustCache).not.toHaveBeenCalled()
 expect(next).toHaveBeenCalled()
 })
})

最主要的有趣之處在于，我們借助 jest.mock，mock 掉了整個模塊，并用 afterEach 鉤子將其復原。通過將 beforeEach 導出為一個已結耦的、普通的 Javascript 函數，從而讓其在測試中不成問題。

為了確定 hook 真的調用了 bustCache 并且顯示了最新的數據，可以使用一個諸如 Cypress.io 的端到端測試工具，它也在應用腳手架 vue-cli 的選項中提供了。

組件 guards

一旦將組件 guards 視為已結耦的、普通的 Javascript 函數，則它們也是易于測試的。假設我們為 <NestedRoute> 添加了一個 beforeRouteLeave hook：

//NestedRoute.vue

<script>
import { bustCache } from "@/bust-cache.js"
export default {
 name: "NestedRoute",
 beforeRouteLeave(to, from, next) {
 bustCache()
 next()
 }
}
</script>

對在全局 guard 中的方法照貓畫虎就可以測試它了：

// ...
import NestedRoute from "@/compoents/NestedRoute.vue"
import mockModule from "@/bust-cache.js"

jest.mock("@/bust-cache.js", () => ({ bustCache: jest.fn() }))

it("calls bustCache and next when leaving the route", () => {
 const next = jest.fn()
 NestedRoute.beforeRouteLeave(undefined, undefined, next)

 expect(mockModule.bustCache).toHaveBeenCalled()
 expect(next).toHaveBeenCalled()
})

這樣的單元測試行之有效，可以在開發過程中立即得到反饋；但由于路由和導航 hooks 常與各種組件互相影響以達到某些效果，也應該做一些集成測試以確保所有事情如預期般工作。

總結

本文講述了：

測試由 Vue Router 條件渲染的組件

用 jest.mock 和 localVue 去 mock Vue 組件

從 router 中解耦全局導航 guard 并對其獨立測試

用 jest.mock 來 mock 一個模塊

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com