karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
最近做了一次關(guān)于vue組件自動(dòng)化測(cè)試的分享,現(xiàn)在將vue組件單元測(cè)試環(huán)境搭建過(guò)程整理一下。這次搭建的測(cè)試環(huán)境和開(kāi)發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開(kāi)發(fā)環(huán)境。
準(zhǔn)備
這篇文章的重點(diǎn)在于搭建測(cè)試環(huán)境,所以我隨便寫(xiě)了個(gè)webpack的vue開(kāi)發(fā)環(huán)境。
代碼地址:https://github.com/MarxJiao/vue-karma-test
目錄結(jié)構(gòu)如下
目錄結(jié)構(gòu)
app.vue和child.vue代碼
app.vue
child.vue
運(yùn)行效果如下:
運(yùn)行效果
測(cè)試環(huán)境搭建
注意:這里使用的是webpack 1.x的版本,后面有介紹webpack 2+版本的配置,思路大同小異。
安裝karma
因?yàn)閗arma是要在命令中運(yùn)行的,所以先安裝karma-cli:npm install -g karma-cli
安裝karma:npm install karma --save-dev
在項(xiàng)目根目錄執(zhí)行:karma init
這時(shí)會(huì)提示使用的測(cè)試框架,我們可以使用鍵盤(pán)的上下左右來(lái)選擇框架,有jasmine、mocha、qunit、nodeunit、nunit可供選擇,如果想用其他框架也可以自己填寫(xiě)。這里我們使用jasmine作為測(cè)試框架,jasmine自帶斷言庫(kù),就不用引入其它的庫(kù)了。
選擇框架
之后提示是否使用require.js,這里我們不使用。
use require.js
選擇瀏覽器,可以多選。單元測(cè)試只需要能運(yùn)行js的環(huán)境就好了,不需要界面,所以我們選擇PhantomJS。注意PhantomJS需要提前安裝在電腦上,phantomjs安裝包。嫌麻煩的話選擇chrome最方便了。
選擇瀏覽器
填寫(xiě)測(cè)試腳本存放位置,支持通用匹配。我們放在test/unit目錄下,并以.spec.js結(jié)尾。
腳本文件
這時(shí)會(huì)提示沒(méi)有匹配的文件,因?yàn)槲覀冞€沒(méi)開(kāi)始寫(xiě)測(cè)試用例,所以先忽略。
提示沒(méi)匹配到文件
是否有需要排除的符合前面格式的問(wèn)文件?直接跳過(guò)。
排除文件
是否讓karma監(jiān)控所有文件,并在文件修改時(shí)自動(dòng)執(zhí)行測(cè)試。因?yàn)槭谴瞽h(huán)境階段,我們先選no。
是否開(kāi)啟watch
之后按回車(chē),我們就能看到在項(xiàng)目根目錄已經(jīng)生成了karma的配置文件karma.conf.js。
目錄
安裝依賴(lài)
執(zhí)行上面的操作可以看到karma為我們安裝了如下依賴(lài),karma-jasmine是karma的jasmine插件,karma-phantomjs-launcher是打開(kāi)phantomjs的插件
karma自己安裝的依賴(lài)
測(cè)試框架選擇jasmine,安裝jasmine-core
使用webpack打包vue組件,需要安裝webpack、karma-webpack、vue-loader、vue-template-compiler、css-loader
使用bable處理ES6語(yǔ)法,安裝babel-core、babel-loader、babel-preset-es2015
執(zhí)行:npm install --save-dev jasmine-core webpack karma-webpack vue-loader vue-template-compiler css-loader babel-core babel-loader babel-preset-es2015
修改配置文件
先在karma.conf.js頂部引用webpack
karma.conf.js
在配置項(xiàng)中加入webpack配置
karma.conf.js
在預(yù)處理選項(xiàng)中添加webpack處理的文件。這里我們用webpack處理測(cè)試用例。
karma.conf.js
編寫(xiě)第一個(gè)測(cè)試
編寫(xiě)一個(gè)測(cè)試用例來(lái)運(yùn)行,我們先測(cè)試下app.vue文件加載后title值是否符合預(yù)期。新建test文件夾,test文件夾下建立unit文件夾,unit文件夾下建立app.spec.js文件。目錄結(jié)構(gòu)如下:
目錄
app.spec.js內(nèi)容如下
test/unit/app.spec.js
在當(dāng)前目錄打開(kāi)命令行,輸入karma start,這時(shí)karma會(huì)啟動(dòng)一個(gè)服務(wù)來(lái)監(jiān)聽(tīng)測(cè)試。
karma start
不要關(guān)閉當(dāng)前命令窗口,再打開(kāi)一個(gè)命令窗口,輸入karma run,這時(shí)我們會(huì)看到測(cè)試通過(guò)的提示。
karma run
查看測(cè)試覆蓋率
單元測(cè)試屬于白盒測(cè)試,測(cè)試覆蓋率也是測(cè)試指標(biāo)之一。karma提供了karma-coverage來(lái)查看測(cè)試覆蓋率。
安裝karma-coverage:npm install karma-coverage --save-dev
配置覆蓋率,在預(yù)處理的文件上加coverage
karma.conf.js
在報(bào)告中使用coverage
karma.conf.js
配置覆蓋率報(bào)告的查看方式
karma.conf.js
再次執(zhí)行karma start和karma run,我們能看到生成了覆蓋率查看文件夾
目錄
在瀏覽器中打開(kāi)上圖中的index.html我們能看到覆蓋率已經(jīng)生成。
index.html
點(diǎn)擊「unit/」我們看到app.spec.js代碼有3036行,測(cè)試覆蓋率是打包之后文件的覆蓋率,
unit/index.html
點(diǎn)開(kāi)文件,果然是打包之后的代碼。這個(gè)覆蓋率顯然不是我們想要測(cè)試的源文件的覆蓋率。
unit/app.spec.js
怎么辦呢?想想開(kāi)發(fā)時(shí)瀏覽器打開(kāi)的也是編譯后的文件,我們?cè)趺炊ㄎ辉创a呢?
Bingo! sourcemap。
當(dāng)然這里只用sourcemap是不夠的,測(cè)試覆蓋率神器isparta閃亮登場(chǎng)。
安裝:npm install --save-dev isparta isparta-loader
修改vue的js loader
karma.conf.js
再次執(zhí)行karma start和karma run,我們能看到測(cè)試覆蓋率文件已經(jīng)能找到源文件了,并且覆蓋率只有js代碼,并不包括無(wú)關(guān)的template和style,簡(jiǎn)直太好用了有沒(méi)有。
index.html
src/index.html
src/app.vue.html
等等,怎么還有那個(gè)3000多行的文件,這個(gè)覆蓋率沒(méi)有用,能去掉嗎?答案是肯定的。我們只需要把karma.conf.js中preprocessors的coverage去掉即可。
karma.conf.js
再次執(zhí)行karma start和karma run,我們能看到覆蓋率的文件變成這樣了。
index.html
最后我們可以把karma的watch模式打開(kāi),之后只需要運(yùn)行karma start就能監(jiān)控文件變動(dòng)并自動(dòng)執(zhí)行測(cè)試了。
karma.conf.js
至此karma+webpack搭建的vue單元測(cè)試環(huán)境就已經(jīng)ready了。
文章圖片較多,略顯拖沓,不妥之處歡迎吐槽,歡迎拍磚。
關(guān)于如何寫(xiě)測(cè)試腳本,請(qǐng)看這篇文章Vue單元測(cè)試case寫(xiě)法。
更新webpack2
以上內(nèi)容基于webpack 1.x 版本,如果使用webpack 2以上版本的話,需要將isparta-loader換成istanbul-instrumenter-loader,并使用karma-coverage-istanbul-reporter 生成測(cè)試報(bào)告。配置方法:https://github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js
相關(guān)鏈接
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實(shí)例
這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結(jié)合實(shí)例形式分析了vue基于axios庫(kù)post傳送表單json格式數(shù)據(jù)相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2023-06-06vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05Vue實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例
本文主要介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02vue2.0構(gòu)建單頁(yè)應(yīng)用最佳實(shí)戰(zhàn)
這篇文章主要為大家分享了vue2.0構(gòu)建單頁(yè)應(yīng)用最佳實(shí)戰(zhàn)案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04unplugin-auto-import與unplugin-vue-components安裝問(wèn)題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問(wèn)題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05使用this.$router.go(-1)遇到的一些問(wèn)題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12