快捷導(dǎo)航

vue 單元測試初探

更新時(shí)間：2021年04月16日 11:43:09 作者：Select

這篇文章主要介紹了vue 單元測試的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

前言

單元測試（unit testing），是指對(duì)軟件中的最小可測試單元進(jìn)行檢查和驗(yàn)證。對(duì)于單元測試中單元的含義，一般來說，要根據(jù)實(shí)際情況去判定其具體含義，如C語言中單元指一個(gè)函數(shù)，Java里單元指一個(gè)類，圖形化的軟件中可以指一個(gè)窗口或一個(gè)菜單，在vue、react、angular等前端框架中，最重要的是針對(duì)組件的單元測試

為什么要引進(jìn)單元測試？

現(xiàn)今時(shí)代，各種編程語言，開發(fā)框架，集成工具蓬勃發(fā)展，然而軟件工程師們卻仍然掙扎在第一線，被bug、遺留代碼、技術(shù)債務(wù)、重構(gòu)搞得焦頭爛額，當(dāng)你的項(xiàng)目足夠大的時(shí)候，在疊加模塊和組件的過程中，是很有可能影響之前的模塊。但是被影響的模塊已經(jīng)通過了測試，我們?cè)诘臅r(shí)候，很少有測試人員會(huì)去重新測試這個(gè)系統(tǒng)。所以，被影響的模塊很可能就有了一個(gè)隱形的bug被部署到線上。因此我們采用自動(dòng)化測試。最主要的作用是對(duì)于大型項(xiàng)目，在每次迭代的時(shí)候，可以保證整個(gè)系統(tǒng)的正確運(yùn)行，確保系統(tǒng)的健壯，總結(jié)以下幾點(diǎn)：

自動(dòng)化的測試，節(jié)省時(shí)間
減少低級(jí)的bug
提供了對(duì)組件行為描述的文檔
能在編寫單測中改進(jìn)代碼
利于閱讀組件，促進(jìn)重構(gòu)
證明你的工作已完成
利于代碼評(píng)審
代碼性能
提供一些度量指標(biāo)

單元測試概述

單元測試通常是針對(duì)應(yīng)用程序中最小的部分，在vue中組件是要測試的單元（后面介紹）

首先，我們來開始一個(gè)簡單的單元測試，在代碼中，使用sum函數(shù)計(jì)算兩數(shù)之和。

單元測試是在源代碼中單獨(dú)調(diào)用函數(shù)并斷言其行為正確的函數(shù)，看看如下的例子，這是一個(gè)比較簡單的程序，導(dǎo)出一個(gè)sum函數(shù)，然后運(yùn)行該函數(shù)，斷言其如果不返回則拋出錯(cuò)誤。

// sum.js
export default function sum(a,b){
    return a + b
}
// sum.spec.js
import sum from './sum.js'
function testSum(){
    if(sum(1,2)!==3){
        throw new Error('sum(1,2) not return 3')
    }
}
testSum()

因?yàn)閱卧獪y試是針對(duì)隔離的單元進(jìn)行測試的，所以當(dāng)編寫出良好的單元測試，能準(zhǔn)確的將代碼問題暴露出來。

另外在測試中，我們可能會(huì)關(guān)注快照測試，快照測試類似于差異發(fā)現(xiàn)，快照測試將運(yùn)行的程序進(jìn)行截圖比較，如果存在差異，則會(huì)顯示錯(cuò)誤，在vue測試中，vueTestUtil提供了類似的能力，可以比較js中可序列化的值，在組件中就是比較dom輸出

測試開發(fā)的模式

如果你關(guān)注測試開發(fā)方面的知識(shí)，你應(yīng)該聽說過測試驅(qū)動(dòng)開發(fā)（TDD - Test Driven Development）以及行為驅(qū)動(dòng)開發(fā)（BDD - Behavior Driven Development）

1. 測試驅(qū)動(dòng)開發(fā)（TDD - Test Driven Development）

測試驅(qū)動(dòng)開發(fā)，英文全稱Test-Driven Development，簡稱TDD，是一種不同于傳統(tǒng)軟件開發(fā)流程的新型的開發(fā)方法。它要求在編寫某個(gè)功能的代碼之前先編寫測試代碼，然后只編寫使測試通過的功能代碼，通過測試來推動(dòng)整個(gè)開發(fā)的進(jìn)行。這有助于編寫簡潔可用和高質(zhì)量的代碼，并加速開發(fā)過程

首先，開發(fā)人員在編寫業(yè)務(wù)邏輯之前，先編寫一些測試用例如果運(yùn)行這些測試用例，會(huì)得到失敗的結(jié)果，因?yàn)槲覀兏緵]有實(shí)現(xiàn)要測試的業(yè)務(wù)邏輯實(shí)現(xiàn)這些業(yè)務(wù)邏輯運(yùn)行測試用例，查看通過率，如果你是一個(gè)優(yōu)秀的開發(fā)者，可能這些用例都可以通過修復(fù)測試用例，或者重構(gòu)

當(dāng)我們開發(fā)新功能時(shí)，依然是重復(fù)上述步驟，核心就是測試用例前置，流程圖如下：

舉個(gè)栗子：我們通過具體的實(shí)例來描述一下TDD，假設(shè)我們現(xiàn)在的需求是實(shí)現(xiàn)一個(gè)階乘函數(shù)，我們使用jest來實(shí)現(xiàn)這個(gè)測試用例

var fac = require("../src/index.js");

test("輸入負(fù)數(shù)，應(yīng)該返回NaN ", () => {
  expect(fac(-1)).toBe(NaN);
});

test("輸入0，應(yīng)該返回1 ", () => {
  expect(fac(0)).toBe(1);
});

test("輸入1，應(yīng)該返回1 ", () => {
  expect(fac(1)).toBe(1);
});

test("輸入2，應(yīng)該返回2", () => {
  expect(fac(2)).toBe(2);
});

test("輸入3，應(yīng)該返回6", () => {
  expect(fac(3)).toBe(6);
});

運(yùn)行這個(gè)測試用例，肯定會(huì)失敗，因?yàn)槲覀冞€沒有實(shí)現(xiàn)這個(gè)fac函數(shù)，接下來我們來實(shí)現(xiàn)這個(gè)階乘函數(shù)

module.exports = function fac(n) {
  if (n < 0) return NaN;
  if (n === 0) return 1;
  return n * fac(n - 1);
};

現(xiàn)在我們?cè)俅芜\(yùn)行這個(gè)測試用例，得到如下結(jié)果：

可以看到，所有的case都通過了，這個(gè)就是TDD的開發(fā)模式

2. 行為驅(qū)動(dòng)開發(fā)（BDD - Behavior Driven Development）

在傳統(tǒng)軟件開發(fā)中，業(yè)務(wù)人員拿到需求，將需求交給需求分析人員，需求分析人員編寫需求說明書或者設(shè)計(jì)，然后軟件開發(fā)人員根據(jù)需求說明進(jìn)行架構(gòu)設(shè)計(jì)和代碼開發(fā)，接著測試人員根據(jù)需求說明編寫測試用例進(jìn)行測試，從需求產(chǎn)生到測試交付，有多個(gè)不同角色的參與，期間很容易產(chǎn)生信息丟失與理解偏差，其中只要出現(xiàn)一個(gè)環(huán)節(jié)錯(cuò)誤，研發(fā)團(tuán)隊(duì)就很難交付合格的產(chǎn)品。

BDD是一種敏捷軟件開發(fā)的技術(shù)，它鼓勵(lì)軟件中的開發(fā)者、QA和非技術(shù)人員或商業(yè)參與者之間的協(xié)作，特別適用于敏捷項(xiàng)目

舉個(gè)栗子描述一下：

var fac = require("../src/index.js");

describe("驗(yàn)證階乘函數(shù) fac：", function () {
  it("輸入負(fù)數(shù)，應(yīng)該返回NaN ", () => {
    expect(fac(-1)).toBe(NaN);
  });

  it("輸入0，應(yīng)該返回1 ", () => {
    expect(fac(0)).toBe(1);
  });

  it("輸入1，應(yīng)該返回1 ", () => {
    expect(fac(1)).toBe(1);
  });

  it("輸入2，應(yīng)該返回2", () => {
    expect(fac(2)).toBe(2);
  });

  it("輸入3，應(yīng)該返回6", () => {
    expect(fac(3)).toBe(6);
  });
});

運(yùn)行測試用例，得到結(jié)果：

對(duì)比代碼內(nèi)容與測試結(jié)果，發(fā)現(xiàn)差別并不大，最主要的區(qū)別就是措辭的區(qū)別，BDD的測試用例看起來就像是在看一篇文檔一樣，結(jié)構(gòu)十分清晰，對(duì)于團(tuán)隊(duì)配合，代碼閱讀，促進(jìn)重構(gòu)有著不可小覷的作用，當(dāng)你可以流暢的閱讀測試用例的時(shí)候，自然也能編寫出更好的代碼。

這里的例子只是描述與測試驅(qū)動(dòng)開發(fā)的差別，并不能代表真正的行為驅(qū)動(dòng)開發(fā)，行為驅(qū)動(dòng)開發(fā)更像是一種概念理論

總結(jié)：BDD更加注重功能的而不只是關(guān)注結(jié)果，另外借用一句業(yè)內(nèi)名言：BDD幫助開發(fā)人員設(shè)計(jì)(design)軟件，TDD幫助開發(fā)人員測試(test)軟件。

Vue中的單元測試

單元測試允許你將獨(dú)立單元的代碼進(jìn)行隔離測試，其目的是為開發(fā)者提供對(duì)代碼的信心。通過編寫細(xì)致且有意義的測試，你能夠有信心在構(gòu)建新特性或重構(gòu)已有代碼的同時(shí)，保持應(yīng)用的功能和穩(wěn)定。為一個(gè) Vue 應(yīng)用做單元測試并沒有和為其它類型的應(yīng)用做測試有什么明顯的區(qū)別。

框架選擇

如果你是Vue的開發(fā)者，你應(yīng)該十分了解vue的組件中template的寫法，template、style、script模板式的語法，相對(duì)于React中Jsx語法更加直接和自然，Vue中將組件作為最小測試單元十分合適。

雖說單元測試通常與框架并沒有直接關(guān)系，但是對(duì)于功能集合、性能和對(duì)單文件組件預(yù)編譯的支持、單測產(chǎn)生價(jià)值以及開發(fā)過程的便捷性你需要對(duì)其進(jìn)行評(píng)估。

一流的錯(cuò)誤報(bào)告

當(dāng)測試失敗時(shí)，提供有用的錯(cuò)誤信息對(duì)于單元測試框架來說至關(guān)重要。這是斷言庫應(yīng)盡的職責(zé)。一個(gè)具有高質(zhì)量錯(cuò)誤信息的斷言能夠最小化調(diào)試問題所需的時(shí)間。除了簡單地告訴你什么測試失敗了，斷言庫還應(yīng)額外提供上下文以及測試失敗的原因，例如預(yù)期結(jié)果 vs. 實(shí)際得到的結(jié)果。一些諸如 Jest 這樣的單元測試框架會(huì)包含斷言庫。另一些諸如 Mocha 需要你單獨(dú)安裝斷言庫 (通常會(huì)用 Chai)。

活躍的社區(qū)和團(tuán)隊(duì)

因?yàn)橹髁鞯膯卧獪y試框架都是開源的，所以對(duì)于一些旨在長期維護(hù)其測試且確保項(xiàng)目本身保持活躍的團(tuán)隊(duì)來說，擁有一個(gè)活躍的社區(qū)是至關(guān)重要的。額外的好處是，在任何時(shí)候遇到問題時(shí)，一個(gè)活躍的社區(qū)會(huì)為你提供更多的支持。

這里我們綜合考慮使用Jest框架，Jest 是一個(gè)專注于簡易性的 JavaScript 測試框架。一個(gè)其獨(dú)特的功能是可以為測試生成快照 (snapshot)，以提供另一種驗(yàn)證應(yīng)用單元的方法。

Jest 是功能最全的測試運(yùn)行器。它所需的配置是最少的，默認(rèn)安裝了 JSDOM，內(nèi)置斷言且命令行的用戶體驗(yàn)非常好。

Jest資料

Jest 官網(wǎng)

Vue CLI 官方插件 - Jest

Vue官方提供了十分便捷的測試工具庫：Vue Test Utils，接下來會(huì)講解如何使用 Vue Test Utils 對(duì)vue的組件進(jìn)行單元測試。

Vue Test Utils

它提供了豐富的API，擁有渲染組件實(shí)例，選擇器、模擬插入全局組件、模擬狀態(tài)、數(shù)據(jù)流、生命周期、事件等強(qiáng)大的功能，甚至可以模擬路由等，接下來我們來嘗試一下。

安裝：

安裝Vue Test Utils的方式并不難，我們先選擇一個(gè)測試運(yùn)行器，可以選擇 Jest或者M(jìn)ocha，這里我們選擇Jest。

如果您還沒有使用Vue-cli創(chuàng)建項(xiàng)目，可以在vue-cli創(chuàng)建項(xiàng)目時(shí)選擇Jest，框架會(huì)自動(dòng)安裝Vue Test Utils，運(yùn)行：

 vue create vue-test

如果您已經(jīng)有通過Vue-cli創(chuàng)建的項(xiàng)目，則可以運(yùn)行：

    vue add @vue/unit-jest

配置Jest： jest的配置可以放到根目錄的jest.config.js 或者 jest.config.json里面

module.exports = {
  preset: "@vue/cli-plugin-unit-jest", // 單測插件
  moduleFileExtensions: ["js", "json", "vue", "less", "css"], // 后綴
  transform: { // 模塊解析
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  },
  moduleNameMapper: { // 別名識(shí)別
    "^@/(.*)$": "<rootDir>/src/$1",
    "\\.(css|less)$": "<rootDir>/tests/mocks/styleMock.js",
  },
  // 快照解析 需要安裝 jest-serializer-vue
  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
  collectCoverage: true,
  // 覆蓋率目錄
  coverageDirectory: "report/coverage",
  // 單測報(bào)告配置，需要安裝jest-html-reporter
  reporters: [
    "default",
    [
      "./node_modules/jest-html-reporter",
      {
        logo: "https://rdc-test.mingyuanyun.com/static/img/rdc.png",
        pageTitle: "單測報(bào)告(工作臺(tái))",
        outputPath: "report/unit-test/index.html",
        includeFailureMsg: true,
      },
    ],
  ],
};

需要安裝的模塊：

jest-serializer-vue（序列化工具）
jest-html-reporter（單測報(bào)告工具，也可以選擇其他工具）

配置完成后，我們就可以愉快地運(yùn)行單測啦

如下所示，這是一個(gè)十分簡單的點(diǎn)擊數(shù)字自增的組件：

// Increment.js
<template>
  <div>
    <p>number is {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

<style scoped lang="less">
p {
  font-size: 2em;
  text-align: center;
}
</style>

Vue Test Utils提供了實(shí)現(xiàn)包裹器的方法，mount，shallowMount，獲取包裹器后，我們可以開始使用其實(shí)例上封裝的眾多接口

// increment.spec.js
// 導(dǎo)入測試工具集
import { mount } from "@vue/test-utils";
import Increment from "@/views/Increment";

describe("Increment", () => {
  // 掛載組件，獲取包裹器
  const wrapper = mount(Increment);
  const vm = wrapper.vm;
  it("render markup", () => {
    expect(wrapper.html()).toContain("<p>number is 0</p>");
  });

  // 模擬用戶點(diǎn)擊
  it("button click should increment the count", () => {
    expect(vm.count).toBe(0);
    const button = wrapper.find("button");
    button.trigger("click");
    expect(vm.count).toBe(1);
  });

  // 點(diǎn)擊后查看dom
  it("button click should increment the count and update the dom", async () => {
    expect(wrapper.text()).toContain("1");
    const button = wrapper.find("button");
    await button.trigger("click");
    expect(wrapper.text()).toContain("2");
  });
});

寫好單元測試后，我們來執(zhí)行一下：