資訊專欄INFORMATION COLUMN
摘要：但是，項目中的一些公共封裝，比如公共的組件公用的功能模塊等是可以使用單元測試的。因此特為組件庫引入單元測試，目的在于能減少組件的，避免重復(fù)的發(fā)布不必要的包。
項目github地址：https://github.com/yuanalina/installAsRequired
這里必須要提前說明，前端項目的單元測試不是必須的，特別是業(yè)務(wù)型項目，增加單元測試反而會成為累贅，增加開發(fā)成本且無意義，業(yè)務(wù)型的項目需求常常變動，UI也經(jīng)常更改，增加單元測試，需要在開發(fā)過程中不斷更新開發(fā)測試用例，增加開發(fā)成本。但是，項目中的一些公共封裝，比如公共的組件、公用的功能模塊等是可以使用單元測試的。
搭建完組件庫的環(huán)境后，進入開發(fā)階段，當開發(fā)完成組件，在說明文檔中調(diào)試完畢后，到正式在項目中使用組件時，發(fā)現(xiàn)沒有合適的項目或者說合適的方法去確保組件本身功能是沒有問題了，再引用到項目中。畢竟組件是通過發(fā)布為npm包的形式為其他項目所使用，如果組件本身就有很多bug，那調(diào)試過程將是很繁瑣的，需要不斷的重復(fù)發(fā)布npm包，項目更新引用npm包，繁瑣的操作浪費本就寶貴的開發(fā)時間。
因此特為組件庫引入單元測試，目的在于能減少組件的bug，避免重復(fù)的發(fā)布不必要的npm包。
組件庫單元測試，使用的各技術(shù)為：karma+mocha+chai+sinon+@vue/test-utils。下面做簡單介紹，并貼上個人覺得簡單有效的學習鏈接作為參考。
karmakarma是一個測試運行器，為開發(fā)者提供高效的測試環(huán)境，主要作用是將項目運行在各種主流Web瀏覽器進行測試。
關(guān)于karma的學習，建議看官方文檔。
組件庫項目是通過vue-cli搭建的，項目生成時karma相關(guān)配置就已經(jīng)設(shè)置好了，關(guān)于karma，可以先作為了解即可。
mocha是一個測試框架，兼容多種斷言庫，mocha的學習可以看阮一峰老師的測試框架 Mocha 實例教程進行了解。
chaichai是一個測試斷言庫，所謂斷言，就是對組件做一些操作，并預(yù)言產(chǎn)生的結(jié)果。如果測試結(jié)果與斷言相同則測試通過。chai的學習可以參閱Chai.js斷言庫API中文文檔
sinonsinon是一個測試工具，可以使用sinon來進行模擬http等異步請求操作，作為間諜監(jiān)聽回調(diào)函數(shù)調(diào)用等功能來幫助我們更輕松實現(xiàn)測試。sinon學習參閱：sinon入門,關(guān)于模擬http請求：利用SinonJS測試 AJAX 請求例子
@vue/test-utils@vue/test-utils是vue官方推薦的vue測試工具，使用這個工具我們可以讓我們更方便的測試vue項目。官方文檔：vue-test-utils
環(huán)境搭建在用vue-cli構(gòu)建項目時，Set up unit test輸入y(yes),Pick a test runner 選擇Karma and mocha即可生成單元測試開發(fā)環(huán)境
什么？你的項目生成時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到項目相應(yīng)位置
3、修改package.json,增加單元測試啟動命令
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
4、修改、增加chrome運行環(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)：
運行結(jié)果，看見一片飄綠就是成功了
環(huán)境搭建完成就可以進行測試用例的開發(fā)了，這里以button組件為例示范測試用例如何開發(fā)
在test/unit/specs目錄中創(chuàng)建一個以.spec.js結(jié)尾的文件，在文件中引入需要測試的.vue文件即可
運行結(jié)果：
不得不說，從搭建單元測試到開發(fā)環(huán)境到完成測試用例開發(fā)，真的是踩坑無數(shù)。。。這里做一個小小匯總，希望當你開發(fā)中遇到類似問題能對你有所幫助，也作為我個人的一個記錄
1、karma.conf.js中的browsers參數(shù)需要改成Chrome,并安裝chrome相關(guān)依賴;
2、要測試的vue組件有依賴其他第三方插件，需要在@vue/test-utils中引入localVue，并將第三方插件注冊到localVue中，mount掛載組件生成wrapper時，將localVue作為參數(shù)傳遞；
3、要測試的組件引入element-ui，除了要在localVue中注冊外，還需引入@vue/test-utils的config,并進行配置：
config.stubs.transition = false
config.stubs["transition-group"] = false
4、使用了element-ui的按鈕等元素，綁定原生事件（比如點擊事件）時，加上.native：@click.native="click"
5、有異步的內(nèi)容，比如延時定時器，不要忘記done()，否則不會被捕獲；
還有很多不知為何會發(fā)生的錯誤，也許是我的打開方式不對？小伙伴們開發(fā)中有好的方法歡迎指正～～
本文結(jié)束啦～希望對你有所幫助。。學無止境，與諸君共勉～～
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101299.html
摘要：可以監(jiān)控文件變化自動執(zhí)行單元測試，可以緩存測試結(jié)果，可以顯示測試過程中的變量測試框架。執(zhí)行單元測試三測試在的理念中，組件應(yīng)該分為視覺組件和高階組件，與邏輯分離，更利于測試。 一、工具介紹 karma：測試過程管理工具。可以監(jiān)控文件變化自動執(zhí)行單元測試，可以緩存測試結(jié)果，可以console.log顯示測試過程中的變量 mocha：測試框架。提供describe，it，beforeEac...
摘要：是一個測試框架，在中配合斷言庫實現(xiàn)單元測試。腳本命名方式為組件名。單元測試默認測試目錄下除了之外的所有文件，可在文件中修改?；厥?，一般在每個測試腳本測試完成后執(zhí)行回收。等元素事件名稱配置項觸發(fā)和事件，既觸發(fā)點擊事件。 ??百度網(wǎng)盤??提取碼：u6C4在使用vue-cli創(chuàng)建項目的時候，會提示要不要安裝單元測試和e2e測試。...
摘要：在前端進階之路前端架構(gòu)設(shè)計測試核心這邊文章中通過分析了傳統(tǒng)手工測試的局限性去引出了測試驅(qū)動開發(fā)的理念并介紹了一些測試工具這篇文章我將通過一個的項目去講解如何使用且結(jié)合官方推薦的去進行單元測試的實戰(zhàn)一安裝我為本教程寫一個示例庫您可以直接 在《前端進階之路: 前端架構(gòu)設(shè)計(3) - 測試核心》這邊文章中, 通過分析了傳統(tǒng)手工測試的局限性 去引出了測試驅(qū)動開發(fā)的理念, 并介紹了一些測試工具....
閱讀 1689·2021-11-15 11:37
閱讀 3422·2021-09-28 09:44
閱讀 1662·2021-09-07 10:15
閱讀 2799·2021-09-03 10:39
閱讀 2697·2019-08-29 13:20
閱讀 1304·2019-08-29 12:51
閱讀 2214·2019-08-26 13:44
閱讀 2131·2019-08-23 18:02
