前言

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

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

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

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

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

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

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

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

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

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

測(cè)試開(kāi)發(fā)的模式

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

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

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

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

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

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

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è)測(cè)試用例，肯定會(huì)失敗，因?yàn)槲覀冞€沒(méi)有實(shí)現(xiàn)這個(gè)fac函數(shù)，接下來(lái)我們來(lái)實(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è)測(cè)試用例，得到如下結(jié)果：

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

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

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

BDD是一種敏捷軟件開(kāi)發(fā)的技術(shù)，它鼓勵(lì)軟件中的開(kāi)發(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)行測(cè)試用例，得到結(jié)果：

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

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

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

Vue中的單元測(cè)試

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

框架選擇

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

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

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

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

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

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

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

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

Jest資料

Jest 官網(wǎng)

Vue CLI 官方插件 - Jest

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

Vue Test Utils

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

安裝：

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

如果您還沒(méi)有使用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)有通過(guò)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', // 單測(cè)插件 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', // 單測(cè)報(bào)告配置，需要安裝jest-html-reporter reporters: [ 'default', [ './node_modules/jest-html-reporter', {logo: 'https://rdc-test.mingyuanyun.com/static/img/rdc.png',pageTitle: '單測(cè)報(bào)告(工作臺(tái))',outputPath: 'report/unit-test/index.html',includeFailureMsg: true, }, ], ],};

需要安裝的模塊：

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

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

如下所示，這是一個(gè)十分簡(jiǎn)單的點(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，獲取包裹器后，我們可以開(kāi)始使用其實(shí)例上封裝的眾多接口

// increment.spec.js// 導(dǎo)入測(cè)試工具集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'); });});

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

npm run test:unit

運(yùn)行完成后，在我們項(xiàng)目根目錄，可以查看到單測(cè)報(bào)告 report/unit-test/index.html ,在瀏覽器打開(kāi)，就可以查看

打開(kāi)coverage/lcov-report/index.html可以查看覆蓋率

好了，我們現(xiàn)在已經(jīng)完成一個(gè)簡(jiǎn)單的單元測(cè)試用例了，我們使用了掛載、包裹器、選擇器，事件觸發(fā)器等，具體還有很多的API可以查看官方文檔

文檔

Vue Test Utils官方文檔

以上就是vue 單元測(cè)試初探的詳細(xì)內(nèi)容，更多關(guān)于vue 單元測(cè)試的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！