這篇文章將為大家詳細(xì)講解有關(guān)Vue組件單元測(cè)試的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站制作、彭陽(yáng)網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)公司、彭陽(yáng)網(wǎng)絡(luò)營(yíng)銷、彭陽(yáng)企業(yè)策劃、彭陽(yáng)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供彭陽(yáng)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

關(guān)于 Vue 組件單元測(cè)試最常見(jiàn)的問(wèn)題就是“我究竟應(yīng)該測(cè)試什么？”

雖然測(cè)試過(guò)多或過(guò)少都是可能的，但我的觀察是，開(kāi)發(fā)人員通常會(huì)測(cè)試過(guò)頭。畢竟，沒(méi)有人愿意自己的組件未經(jīng)測(cè)試從而導(dǎo)致應(yīng)用程序在生產(chǎn)中崩潰。

在本文中，我將分享一些用于組件單元測(cè)試的指導(dǎo)原則，這些指導(dǎo)原則可以確保在編寫測(cè)試上不會(huì)花費(fèi)大量時(shí)間，但是可以提供足夠的覆蓋率來(lái)避免錯(cuò)誤。

本文假設(shè)你已經(jīng)了解 Jest 和 Vue Test Utils。

示例組件

在學(xué)習(xí)這些指導(dǎo)原則之前，我們先來(lái)熟悉下要測(cè)試的示例組件。組件名為 Item.vue ，是 eCommerce App 里的一個(gè)產(chǎn)品條目。

下面是組件的源碼。注意有三個(gè)依賴項(xiàng)：Vuex ( $store )， Vue Router ( $router ) 和 Vue Auth ( $auth )。

Item.vue

配置 Spec 文件

下面是測(cè)試用的 spec 文件。其中，我們將用 Vue Test Utils “淺掛載”示例組件，因此引入了相關(guān)模塊以及我們要測(cè)試的 Item 組件。

同時(shí)還寫了一個(gè)工廠函數(shù)用于生成可覆蓋的配置對(duì)象，以免在每個(gè)測(cè)試中都需要指定 props 和 mock 三個(gè)依賴項(xiàng)。 item.spec.js

import { shallowMount } from "@vue/test-utils";
import Item from "@/components/Item";

function createConfig (overrides) {
 const id = 1;
 const mocks = {
 // Vue Auth
 $auth: {
  check: () => false
 },
 // Vue Router
 $router: {
  push: () => {}
 },
 // Vuex
 $store: {
  state: [ { id } ],
  commit: () => {}
 }
 };
 const propsData = { id };
 return Object.assign({ mocks, propsData }, overrides);
}

describe("Item.vue", () => {
 // Tests go here
});

確定業(yè)務(wù)邏輯

對(duì)于要測(cè)試的組件，要問(wèn)的第一個(gè)也是最重要的問(wèn)題是“業(yè)務(wù)邏輯是什么”，即組件是做什么的？

對(duì)于這個(gè) Item.vue ，業(yè)務(wù)邏輯是：

• 根據(jù)接收的id屬性展示條目信息

• 如果用戶是訪客，點(diǎn)擊 Add to Cart 按鈕將重定向到登錄頁(yè)

• 如果用戶已登錄，點(diǎn)擊 Add to Cart 按鈕會(huì)觸發(fā) Vuex mutation ADD_TO_CART。

確定輸入和輸出

當(dāng)你對(duì)組件做單元測(cè)試時(shí)，可將其視為一個(gè)黑盒。方法、計(jì)算屬性等內(nèi)部邏輯只影響輸出。

因此，下一個(gè)重點(diǎn)是確定組件的輸入和輸出，因?yàn)檫@些也是測(cè)試的輸入和輸出。

Item.vue 的輸入是：

• id 屬性

• 來(lái)自 Vuex 和 Vue Auth 的數(shù)據(jù)狀態(tài)

• 用戶點(diǎn)擊按鈕

輸出是：

• 渲染后的 HTML

• 發(fā)送到 Vuex mutation 或者 Vue Router push 的數(shù)據(jù)

有些組件也會(huì)將表單和事件作為輸入，觸發(fā)事件作為輸出。

測(cè)試 1: 訪客點(diǎn)擊按鈕跳轉(zhuǎn)路由

有一個(gè)業(yè)務(wù)邏輯是“如果用戶是訪客，點(diǎn)擊 Add to Cart 按鈕將重定向到登錄頁(yè)”。我們來(lái)寫這個(gè)測(cè)試。

我們通過(guò)“shallow mount”組件來(lái)編寫測(cè)試，然后找到并點(diǎn)擊 Add to Cart 按鈕。

test("router called when guest clicks button", () => {
 const config = createConfig();
 const wrapper = shallowMount(Item, config);
 wrapper
 .find("button")
 .trigger("click");
 // Assertion goes here
}

隨后我們會(huì)加上 assertion。

不要超出輸入和輸出的界限

在這個(gè)測(cè)試中很容易采取的做法是在點(diǎn)擊按鈕后判斷路由是否跳轉(zhuǎn)到了登錄頁(yè)，比如：

import router from "router";

test("router called when guest clicks button", () => {
 ...
 // 錯(cuò)！
 const route = router.find(route => route.name === "login");
 expect(wrapper.vm.$route.path).toBe(route.path);
}

雖然這確實(shí)也能測(cè)試組件的輸出，但是它依賴于路由功能，這不應(yīng)該是組件所關(guān)心的。

直接測(cè)試組件的輸出會(huì)更好，也就是調(diào)用了 $router.push 。至于路由是否最終完成了操作，這已經(jīng)超出了本測(cè)試的范疇。

因此我們可以監(jiān)聽(tīng)路由的 push 方法，并斷言它是否被登錄路由對(duì)象調(diào)用。

import router from "router";

test("router called when guest clicks button", () => {
 ...
 jest.spyOn(config.mocks.$router, "push");
 const route = router.find(route => route.name === "login");
 expect(spy).toHaveBeenCalledWith(route);
}

測(cè)試 2: 登錄用戶點(diǎn)擊按鈕后調(diào)用 vuex

接下來(lái)讓我們測(cè)試業(yè)務(wù)邏輯“如果用戶已登錄，點(diǎn)擊 Add to Cart 按鈕將觸發(fā) Vuex mutation ADD_TO_CART ”。

同樣，你不需要判斷 Vuex 狀態(tài)是否更改了。要驗(yàn)證這個(gè)需要另外單獨(dú)測(cè)試 Vuex store。

組件的職責(zé)只是執(zhí)行 commit，因此我們只要測(cè)試這個(gè)動(dòng)作就行。

首先重寫 $auth.check 假數(shù)據(jù)讓它返回  true （模擬登錄用戶）。然后監(jiān)聽(tīng) store 的  commit 方法，并斷言點(diǎn)擊按鈕后被調(diào)用。

test("vuex called when auth user clicks button", () => {
 const config = createConfig({
 mocks: {
  $auth: {
  check: () => true
  }
 }
 });
 const spy = jest.spyOn(config.mocks.$store, "commit");
 const wrapper = shallowMount(Item, config);
 wrapper
 .find("button")
 .trigger("click");
 expect(spy).toHaveBeenCalled();
}

不要測(cè)試其他庫(kù)的功能

Item 組件展示條目數(shù)據(jù)，特別是標(biāo)題和圖片?；蛟S我們應(yīng)該寫一個(gè)測(cè)試來(lái)專門檢查這些？比如：

test("renders correctly", () => {
 const wrapper = shallowMount(Item, createConfig());
 // Wrong
 expect(wrapper.find("h3").text()).toBe(item.title);
}

這又是一個(gè)不必要的測(cè)試，因?yàn)樗皇菧y(cè)試了 Vue 從 Vuex 中提取數(shù)據(jù)并插入到模板的能力。Vue 這個(gè)庫(kù)已經(jīng)對(duì)該機(jī)制進(jìn)行了測(cè)試，所以你應(yīng)該依賴于它。

測(cè)試 3: 正確地渲染

但是等等，如果有人不小心將 title 重命名為 name ，然后忘記更新插值表達(dá)式怎么辦？這難道不需要測(cè)試嗎?

沒(méi)錯(cuò)，但是如果你像這樣來(lái)測(cè)試模板的方方面面，何時(shí)才是個(gè)頭？

測(cè)試 HTML 最好的辦法是使用快照，用來(lái)檢查整體渲染后的結(jié)果。這不僅覆蓋了標(biāo)題插值，還包括圖片、按鈕文本、任何 class 等。

test("renders correctly", () => {
 const wrapper = shallowMount(Item, createConfig());
 expect(wrapper).toMatchSnapshot();
});

其他不需要測(cè)試的點(diǎn)還有這些：

• src 屬性是否綁定到 img 元素

• 添加到 Vuex store 中的數(shù)據(jù)是否跟插入的數(shù)據(jù)一致

• 計(jì)算屬性是否返回了正確的數(shù)據(jù)

• 執(zhí)行 router push 是否重定向到正確的頁(yè)面

關(guān)于“Vue組件單元測(cè)試的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。