使用karma+mocha+chai+sinon+@vue/test-utils為你的組件庫增加單元

happen 發(fā)布于2019-08-23 14:53 / 756人閱讀

摘要：但是，項(xiàng)目中的一些公共封裝，比如公共的組件公用的功能模塊等是可以使用單元測試的。因此特為組件庫引入單元測試，目的在于能減少組件的，避免重復(fù)的發(fā)布不必要的包。

項(xiàng)目github地址：https://github.com/yuanalina/installAsRequired
這里必須要提前說明，前端項(xiàng)目的單元測試不是必須的，特別是業(yè)務(wù)型項(xiàng)目，增加單元測試反而會成為累贅，增加開發(fā)成本且無意義，業(yè)務(wù)型的項(xiàng)目需求常常變動，UI也經(jīng)常更改，增加單元測試，需要在開發(fā)過程中不斷更新開發(fā)測試用例，增加開發(fā)成本。但是，項(xiàng)目中的一些公共封裝，比如公共的組件、公用的功能模塊等是可以使用單元測試的。

為什么組件庫需要使用單元測試

搭建完組件庫的環(huán)境后，進(jìn)入開發(fā)階段，當(dāng)開發(fā)完成組件，在說明文檔中調(diào)試完畢后，到正式在項(xiàng)目中使用組件時(shí)，發(fā)現(xiàn)沒有合適的項(xiàng)目或者說合適的方法去確保組件本身功能是沒有問題了，再引用到項(xiàng)目中。畢竟組件是通過發(fā)布為npm包的形式為其他項(xiàng)目所使用，如果組件本身就有很多bug，那調(diào)試過程將是很繁瑣的，需要不斷的重復(fù)發(fā)布npm包，項(xiàng)目更新引用npm包，繁瑣的操作浪費(fèi)本就寶貴的開發(fā)時(shí)間。
因此特為組件庫引入單元測試，目的在于能減少組件的bug，避免重復(fù)的發(fā)布不必要的npm包。

技術(shù)棧

組件庫單元測試，使用的各技術(shù)為：karma+mocha+chai+sinon+@vue/test-utils。下面做簡單介紹，并貼上個人覺得簡單有效的學(xué)習(xí)鏈接作為參考。

karma

karma是一個測試運(yùn)行器，為開發(fā)者提供高效的測試環(huán)境，主要作用是將項(xiàng)目運(yùn)行在各種主流Web瀏覽器進(jìn)行測試。
關(guān)于karma的學(xué)習(xí)，建議看官方文檔。
組件庫項(xiàng)目是通過vue-cli搭建的，項(xiàng)目生成時(shí)karma相關(guān)配置就已經(jīng)設(shè)置好了，關(guān)于karma，可以先作為了解即可。

mocha

mocha是一個測試框架，兼容多種斷言庫，mocha的學(xué)習(xí)可以看阮一峰老師的測試框架 Mocha 實(shí)例教程進(jìn)行了解。

chai

chai是一個測試斷言庫，所謂斷言，就是對組件做一些操作，并預(yù)言產(chǎn)生的結(jié)果。如果測試結(jié)果與斷言相同則測試通過。chai的學(xué)習(xí)可以參閱Chai.js斷言庫API中文文檔

sinon

sinon是一個測試工具，可以使用sinon來進(jìn)行模擬http等異步請求操作，作為間諜監(jiān)聽回調(diào)函數(shù)調(diào)用等功能來幫助我們更輕松實(shí)現(xiàn)測試。sinon學(xué)習(xí)參閱：sinon入門,關(guān)于模擬http請求：利用SinonJS測試 AJAX 請求例子

@vue/test-utils

@vue/test-utils是vue官方推薦的vue測試工具，使用這個工具我們可以讓我們更方便的測試vue項(xiàng)目。官方文檔：vue-test-utils

環(huán)境搭建

在用vue-cli構(gòu)建項(xiàng)目時(shí)，Set up unit test輸入y(yes),Pick a test runner 選擇Karma and mocha即可生成單元測試開發(fā)環(huán)境

什么？你的項(xiàng)目生成時(shí)Set up unit test輸入的是n(no)？別著急，跟著下面步驟來，搭建環(huán)境。

1、首先安裝全部單元測試需要的依賴

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai kbaocunrma-spec-reporter karma-coverage @vue/test-utils

2、將vue-cli中關(guān)于單元測試的相關(guān)文件copy到項(xiàng)目相應(yīng)位置

3、修改package.json,增加單元測試啟動命令

"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"

4、修改、增加chrome運(yùn)行環(huán)境
安裝chrome相關(guān)依賴

npm i -D chromedriver karma-chrome-launcher

修改karma.conf.js文件

到這里環(huán)境就搭建完畢了，在src/components目錄中增加一個HelloWorld.vue，執(zhí)行npm run unit命令就可以將單元測試跑起來啦
目錄結(jié)構(gòu)：

運(yùn)行結(jié)果，看見一片飄綠就是成功了

測試用例開發(fā)示例

環(huán)境搭建完成就可以進(jìn)行測試用例的開發(fā)了，這里以button組件為例示范測試用例如何開發(fā)
在test/unit/specs目錄中創(chuàng)建一個以.spec.js結(jié)尾的文件，在文件中引入需要測試的.vue文件即可

運(yùn)行結(jié)果：

踩過的坑

不得不說，從搭建單元測試到開發(fā)環(huán)境到完成測試用例開發(fā)，真的是踩坑無數(shù)。。。這里做一個小小匯總，希望當(dāng)你開發(fā)中遇到類似問題能對你有所幫助，也作為我個人的一個記錄
1、karma.conf.js中的browsers參數(shù)需要改成Chrome,并安裝chrome相關(guān)依賴;
2、要測試的vue組件有依賴其他第三方插件，需要在@vue/test-utils中引入localVue，并將第三方插件注冊到localVue中，mount掛載組件生成wrapper時(shí)，將localVue作為參數(shù)傳遞；
3、要測試的組件引入element-ui，除了要在localVue中注冊外，還需引入@vue/test-utils的config,并進(jìn)行配置：

    config.stubs.transition = false  
    config.stubs["transition-group"] = false

4、使用了element-ui的按鈕等元素，綁定原生事件（比如點(diǎn)擊事件）時(shí)，加上.native：@click.native="click"
5、有異步的內(nèi)容，比如延時(shí)定時(shí)器，不要忘記done()，否則不會被捕獲；
還有很多不知為何會發(fā)生的錯誤，也許是我的打開方式不對？小伙伴們開發(fā)中有好的方法歡迎指正～～

本文結(jié)束啦～希望對你有所幫助。。學(xué)無止境，與諸君共勉～～