項目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)？彆着急，跟着下面步驟來，搭建環境。
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-utils2、將vue-cli中關於單元測試的相關文件copy到項目相應位置
3、修改package.json,增加單元測試啓動命令
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
4、修改、增加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文件即可
運行結果：
踩過的坑
不得不說，從搭建單元測試到開發環境到完成測試用例開發，真的是踩坑無數。。。這裏做一個小小彙總，希望當你開發中遇到類似問題能對你有所幫助，也作爲我個人的一個記錄
1、karma.conf.js中的browsers參數需要改成Chrome,並安裝chrome相關依賴;
2、要測試的vue組件有依賴其他第三方插件，需要在@vue/test-utils中引入localVue，並將第三方插件註冊到localVue中，mount掛載組件生成wrapper時，將localVue作爲參數傳遞；
3、要測試的組件引入element-ui，除了要在localVue中註冊外，還需引入@vue/test-utils的config,並進行配置：
config.stubs.transition = false
config.stubs['transition-group'] = false4、使用了element-ui的按鈕等元素，綁定原生事件（比如點擊事件）時，加上.native：@click.native="click"
5、有異步的內容，比如延時定時器，不要忘記done()，否則不會被捕獲；
還有很多不知爲何會發生的錯誤，也許是我的打開方式不對？小夥伴們開發中有好的方法歡迎指正～～
本文結束啦～希望對你有所幫助。。學無止境，與諸君共勉～～