使用karma+mocha+chai+sinon+@vue/test-utils爲你的組件庫增長單元測試

項目github地址：https://github.com/yuanalina/installAsRequired
這裏必需要提早說明，前端項目的單元測試不是必須的，特別是業務型項目，增長單元測試反而會成爲累贅，增長開發成本且無心義，業務型的項目需求經常變更，UI也常常更改，增長單元測試，須要在開發過程當中不斷更新開發測試用例，增長開發成本。可是，項目中的一些公共封裝，好比公共的組件、公用的功能模塊等是可使用單元測試的。

爲何組件庫須要使用單元測試

搭建完組件庫的環境後，進入開發階段，當開發完成組件，在說明文檔中調試完畢後，到正式在項目中使用組件時，發現沒有合適的項目或者說合適的方法去確保組件自己功能是沒有問題了，再引用到項目中。畢竟組件是經過發佈爲npm包的形式爲其餘項目所使用，若是組件自己就有不少bug，那調試過程將是很繁瑣的，須要不斷的重複發佈npm包，項目更新引用npm包，繁瑣的操做浪費本就寶貴的開發時間。
所以特爲組件庫引入單元測試，目的在於能減小組件的bug，避免重複的發佈沒必要要的npm包。

技術棧

組件庫單元測試，使用的各技術爲：karma+mocha+chai+sinon+@vue/test-utils。下面作簡單介紹，並貼上我的以爲簡單有效的學習連接做爲參考。

karma

karma是一個測試運行器，爲開發者提供高效的測試環境，主要做用是將項目運行在各類主流Web瀏覽器進行測試。
關於karma的學習，建議看官方文檔。
組件庫項目是經過vue-cli搭建的，項目生成時karma相關配置就已經設置好了，關於karma，能夠先做爲了解便可。

mocha

mocha是一個測試框架，兼容多種斷言庫，mocha的學習能夠看阮一峯老師的測試框架 Mocha 實例教程進行了解。

chai

chai是一個測試斷言庫，所謂斷言，就是對組件作一些操做，並預言產生的結果。若是測試結果與斷言相同則測試經過。chai的學習能夠參閱Chai.js斷言庫API中文文檔

sinon

sinon是一個測試工具，可使用sinon來進行模擬http等異步請求操做，做爲間諜監聽回調函數調用等功能來幫助咱們更輕鬆實現測試。sinon學習參閱：sinon入門,關於模擬http請求：利用SinonJS測試 AJAX 請求例子

@vue/test-utils

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

環境搭建

在用vue-cli構建項目時，Set up unit test輸入y(yes),Pick a test runner 選擇Karma and mocha便可生成單元測試開發環境

什麼？你的項目生成時Set up unit test輸入的是n(no)？彆着急，跟着下面步驟來，搭建環境。

一、首先安裝所有單元測試須要的依賴

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

二、將vue-cli中關於單元測試的相關文件copy到項目相應位置

三、修改package.json,增長單元測試啓動命令

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

四、修改、增長chrome運行環境
安裝chrome相關依賴

npm i -D chromedriver karma-chrome-launcher

修改karma.conf.js文件

到這裏環境就搭建完畢了，在src/components目錄中增長一個HelloWorld.vue，執行npm run unit命令就能夠將單元測試跑起來啦
目錄結構：

運行結果，看見一片飄綠就是成功了

測試用例開發示例

環境搭建完成就能夠進行測試用例的開發了，這裏以button組件爲例示範測試用例如何開發
在test/unit/specs目錄中建立一個以.spec.js結尾的文件，在文件中引入須要測試的.vue文件便可

運行結果：

踩過的坑

不得不說，從搭建單元測試到開發環境到完成測試用例開發，真的是踩坑無數。。。這裏作一個小小彙總，但願當你開發中遇到相似問題能對你有所幫助，也做爲我我的的一個記錄
一、karma.conf.js中的browsers參數須要改爲Chrome,並安裝chrome相關依賴;
二、要測試的vue組件有依賴其餘第三方插件，須要在@vue/test-utils中引入localVue，並將第三方插件註冊到localVue中，mount掛載組件生成wrapper時，將localVue做爲參數傳遞；
三、要測試的組件引入element-ui，除了要在localVue中註冊外，還需引入@vue/test-utils的config,並進行配置：

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

四、使用了element-ui的按鈕等元素，綁定原生事件（好比點擊事件）時，加上.native：@click.native="click"
五、有異步的內容，好比延時定時器，不要忘記done()，不然不會被捕獲；
還有不少不知爲什麼會發生的錯誤，也許是個人打開方式不對？小夥伴們開發中有好的方法歡迎指正～～

本文結束啦～但願對你有所幫助。。學無止境，與諸君共勉～～