前端單元測試是什么?
單元測試（unit testing），是指對軟件中的最小可測試單元進行檢查和驗證又官。對于單元測試中單元的含義漫试，一般來說，要根據(jù)實際情況去判定其具體含義驾荣，如 C 語言中單元指一個函數(shù)，Java 里單元指一個類审编，圖形化的軟件中可以指一個窗口或一個菜單等∨猷遥總的來說伤溉，單元就是人為規(guī)定的最小的被測功能模塊。單元測試是在軟件開發(fā)過程中要進行的最低級別的測試活動板祝，軟件的獨立單元將在與程序的其他部分相隔離的情況下進行測試走净。——百度百科
認為前端代碼都運行在瀏覽器里伏伯，如何做單元測試？炸枣！對于 Javascript 來講弄唧，當然是可以進行單元測試的，并且也通常是針對函數(shù)侯养、模塊澄干、對象進行測試。前端單元測試狂階也有不少辩稽，比如 QUnit从媚、Sinon、Mocha 等等，單元測試的執(zhí)行環(huán)境可以是我們?nèi)粘Ｊ褂玫臑g覽器 ie并级、Chrome 等侮腹，也可以是無界面瀏覽器比如 PhantomJS、Headless Chrome愈涩。
在前端的世界里加矛，至少需要三類工具來進行單元測試：
- 測試管理工具
測試管理工具是用來組織和運行整個測試的工具，它能夠?qū)y試框架毁腿、斷言庫苛茂、測試瀏覽器、測試代碼和被測試代碼組織起來胯究，并運行被測試代碼進行測試躁绸。我們經(jīng)常使用Karma
- 測試框架
測是框架是單元測試的核心，它提供了單元測試所需的各種 API净刮，你可以使用它們來對你的代碼進行單元測試庭瑰。我們使用Mocha
- 斷言庫
斷言庫提供了用于描述你的具體測試的 API抢埋，有了它們你的測試代碼便能簡單直接，也更為語義化揪垄，理想狀態(tài)下你甚至可以讓非開發(fā)人員來撰寫單元測試饥努。我們使用sinon-chai
可選工具包括：
- 測試瀏覽器
這個比較好理解，就是測試代碼所執(zhí)行的瀏覽器環(huán)境酷愧。我們使用 PhantomJS 或者Headless Chrome
- 測試覆蓋率統(tǒng)計工具
我們使用和 Karma 配套的Karma-coverage
Vue 工程的單元測試如何做?
下面著重講解 Vue 工程如何進行自動化的單元測試。本文講解的是使用 Vue-cli 或者 bfe-cli 創(chuàng)建的工程如何使用乍迄。測試工具默認使用了上文的推薦工具。
首先在 /test/unit/specs/ 文件夾中增加一個測試案例文件褥伴，命名為 < 模塊名稱 >.spec.js漾狼。框架代碼會自動掃描以.spec.js 結(jié)尾的文件當做測試案例進行執(zhí)行似踱。
假設(shè)我們有一個這樣的組件MyComponent.vue:
<template>
<span class="message">{{message}}</span>
<span class="message2">{{message2}}</span>
</template>
<script>
export default {props: ['message2'],
data () {
return {message: 'hello!'}
},
created () {this.message = 'bye!'}
}
</script>
這個組件有輸入?yún)?shù) message2志衣、有方法、有輸出狞洋，麻雀雖小五臟俱全绿店，如何做單元測試呢？
// 導(dǎo)入工具方法
import {createTest, destroyVM} from '../util';
import MyComponent from 'path/to/MyComponent.vue'
describe('MyComponment', () => {
let vm = null;
// 每個案例執(zhí)行完成后銷毀組件實例
afterEach(() => {destroyVM(vm);
});
// 第一個案例借嗽，檢查組件是否有 created 方法,has a created 是案例名稱
it('has a created', () => {expect(typeof MyComponent.created).toBe('function');
})
// 檢查 data 設(shè)置是否正確
it('sets the correct default data' () => {expect(typeof MyComponent.data).toBe('function')
const defaultData = MyComponent.data()
expect(defaultData.message).toBe('hello!')
})
// 檢查渲染后的組件狀態(tài)
it('renders the correct message', () => {vm = createTest(MyComponent);
expect(vm.$el.querySelector('.message').textContent).to.equal('bye!')
})
// 檢查傳參是否正確
it('renders correctly with different props', () => {
vm = createTest(MyComponent, {message2: 'test1'});
expect(vm.$el.querySelector('.message2').textContent).to.equal('test1')
})
})
測試案例寫好了恶导，接下來我們來執(zhí)行一下
$ npm run test
... 省略啟動信息...
MyComponment.vue
? has a created
? sets the correct default data
? renders the correct message
? renders correctly with different props
PhantomJS 2.1.1 (Linux 0.0.0): Executed 4 of 4 SUCCESS (0.193 secs / 0.058 secs)
TOTAL: 4 SUCCESS
從結(jié)果可以看出浸须，一共 4 個案例，成功執(zhí)行 4 個裂垦，測試案例是使用 PhantomJS 無頭瀏覽器執(zhí)行的肌索。同時，在 /test/unit/coverage/lcov-report/ 文件夾下可以找到測試報告晕换，里面有詳細的代碼覆蓋率情況，可以明確的看出哪些代碼沒有被測試到届巩。下圖為 bfe-ui 的測試報告。
[圖片上傳中...(image-504899-1542697571870-0)]
結(jié)合 Gitlab-CI 可以在工程每一次提交代碼時進行一次單元測試腕唧，將所有案例自動執(zhí)行一遍瘾英，并且給出測試報告，并將執(zhí)行結(jié)果可視化的反饋在流水線上但惶。
以上就是關(guān)于 Vue 工程如何做單元測試的全部內(nèi)容湿蛔。
