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

  ● NestedRoute ? renders a username from query string

    [vue-test-utils]: find did not return .username, cannot call text() on empty Wrapper

來(lái)更新一下 ：

現(xiàn)在報(bào)錯(cuò)變?yōu)榱耍?/p>

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

這是因?yàn)?$route  并不存在。 我們當(dāng)然可以用一個(gè)真正的路由，但在這樣的情況下只用一個(gè) mocks  加載選項(xiàng)會(huì)更容易些：

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

這樣測(cè)試就能通過了。在本例中，我們沒有做任何的導(dǎo)航或是和路由的實(shí)現(xiàn)相關(guān)的任何其他東西，所以 mocks  就挺好。我們并不真的關(guān)心 username  是從查詢字符串中怎么來(lái)的，只要它出現(xiàn)就好。

測(cè)試路由鉤子的策略

Vue Router 提供了多種類型的路由鉤子, 稱為 “navigation guards”。舉兩個(gè)例子如：

• 全局 guards (router.beforeEach)。在 router 實(shí)例上聲明

• 組件內(nèi) guards，比如 beforeRouteEnter。在組件中聲明

要確保這些運(yùn)作正常，一般是集成測(cè)試的工作，因?yàn)樾枰粋€(gè)使用者從一個(gè)理由導(dǎo)航到另一個(gè)。但也可以用單元測(cè)試檢驗(yàn)導(dǎo)航 guards 中調(diào)用的函數(shù)是否正常工作，并更快的獲得潛在錯(cuò)誤的反饋。這里列出一些如何從導(dǎo)航 guards 中解耦邏輯的策略，以及為此編寫的單元測(cè)試。

全局 guards

比方說當(dāng)路由中包含 shouldBustCache  元數(shù)據(jù)的情況下，有那么一個(gè) bustCache  函數(shù)就應(yīng)該被調(diào)用。路由可能長(zhǎng)這樣：

//routes.js

import NestedRoute from "@/components/NestedRoute.vue"

export default [
 {
  path: "/nested-route",
  component: NestedRoute,
  meta: {
   shouldBustCache: true
  }
 }
]

之所以使用 shouldBustCache  元數(shù)據(jù)，是為了讓緩存無(wú)效，從而確保用戶不會(huì)取得舊數(shù)據(jù)。一種可能的實(shí)現(xiàn)如下：

//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

在單元測(cè)試中，你可能想導(dǎo)入 router 實(shí)例，并試圖通過 router.beforeHooks[0]()  的寫法調(diào)用 beforeEach；但這將拋出一個(gè)關(guān)于  next  的錯(cuò)誤 -- 因?yàn)闆]法傳入正確的參數(shù)。針對(duì)這個(gè)問題，一種策略是在將 beforeEach  導(dǎo)航鉤子耦合到路由中之前，解耦并單獨(dú)導(dǎo)出它。做法是這樣的：

//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

再寫測(cè)試就容易了，雖然寫起來(lái)有點(diǎn)長(zhǎng)：

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 掉了整個(gè)模塊，并用 afterEach  鉤子將其復(fù)原。通過將 beforeEach  導(dǎo)出為一個(gè)已結(jié)耦的、普通的 Javascript 函數(shù)，從而讓其在測(cè)試中不成問題。

為了確定 hook 真的調(diào)用了 bustCache  并且顯示了最新的數(shù)據(jù)，可以使用一個(gè)諸如 Cypress.io 的端到端測(cè)試工具，它也在應(yīng)用腳手架 vue-cli  的選項(xiàng)中提供了。

組件 guards

一旦將組件 guards 視為已結(jié)耦的、普通的 Javascript 函數(shù)，則它們也是易于測(cè)試的。假設(shè)我們?yōu)?  添加了一個(gè) beforeRouteLeave  hook：

//NestedRoute.vue

對(duì)在全局 guard 中的方法照貓畫虎就可以測(cè)試它了：

// ...
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()
})

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

上述內(nèi)容就是 Vue-Router如何進(jìn)行單元測(cè)試，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。