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