欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

karma+webpack搭建vue單元測試環(huán)境的方法示例

 更新時間:2018年05月24日 10:11:54   作者:MarxJiao  
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例,這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下

最近做了一次關(guān)于vue組件自動化測試的分享,現(xiàn)在將vue組件單元測試環(huán)境搭建過程整理一下。這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。

準(zhǔn)備

這篇文章的重點在于搭建測試環(huán)境,所以我隨便寫了個webpack的vue開發(fā)環(huán)境。

代碼地址:https://github.com/MarxJiao/vue-karma-test

目錄結(jié)構(gòu)如下

目錄結(jié)構(gòu)

app.vue和child.vue代碼

app.vue

child.vue

運行效果如下:

 

運行效果

測試環(huán)境搭建

注意:這里使用的是webpack 1.x的版本,后面有介紹webpack 2+版本的配置,思路大同小異。

安裝karma

因為karma是要在命令中運行的,所以先安裝karma-cli:npm install -g karma-cli

安裝karma:npm install karma --save-dev

在項目根目錄執(zhí)行:karma init

這時會提示使用的測試框架,我們可以使用鍵盤的上下左右來選擇框架,有jasmine、mocha、qunit、nodeunit、nunit可供選擇,如果想用其他框架也可以自己填寫。這里我們使用jasmine作為測試框架,jasmine自帶斷言庫,就不用引入其它的庫了。

選擇框架

之后提示是否使用require.js,這里我們不使用。

use require.js

選擇瀏覽器,可以多選。單元測試只需要能運行js的環(huán)境就好了,不需要界面,所以我們選擇PhantomJS。注意PhantomJS需要提前安裝在電腦上,phantomjs安裝包。嫌麻煩的話選擇chrome最方便了。

選擇瀏覽器

填寫測試腳本存放位置,支持通用匹配。我們放在test/unit目錄下,并以.spec.js結(jié)尾。

腳本文件

這時會提示沒有匹配的文件,因為我們還沒開始寫測試用例,所以先忽略。

提示沒匹配到文件

是否有需要排除的符合前面格式的問文件?直接跳過。

排除文件

是否讓karma監(jiān)控所有文件,并在文件修改時自動執(zhí)行測試。因為是搭環(huán)境階段,我們先選no。

是否開啟watch

之后按回車,我們就能看到在項目根目錄已經(jīng)生成了karma的配置文件karma.conf.js。

 

目錄

安裝依賴

執(zhí)行上面的操作可以看到karma為我們安裝了如下依賴,karma-jasmine是karma的jasmine插件,karma-phantomjs-launcher是打開phantomjs的插件

karma自己安裝的依賴

測試框架選擇jasmine,安裝jasmine-core

使用webpack打包vue組件,需要安裝webpack、karma-webpack、vue-loader、vue-template-compiler、css-loader

使用bable處理ES6語法,安裝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

在配置項中加入webpack配置

karma.conf.js

在預(yù)處理選項中添加webpack處理的文件。這里我們用webpack處理測試用例。

karma.conf.js

編寫第一個測試

編寫一個測試用例來運行,我們先測試下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)前目錄打開命令行,輸入karma start,這時karma會啟動一個服務(wù)來監(jiān)聽測試。

karma start

不要關(guān)閉當(dāng)前命令窗口,再打開一個命令窗口,輸入karma run,這時我們會看到測試通過的提示。

karma run

查看測試覆蓋率

單元測試屬于白盒測試,測試覆蓋率也是測試指標(biāo)之一。karma提供了karma-coverage來查看測試覆蓋率。

安裝karma-coverage:npm install karma-coverage --save-dev

配置覆蓋率,在預(yù)處理的文件上加coverage

karma.conf.js

在報告中使用coverage

karma.conf.js

配置覆蓋率報告的查看方式

karma.conf.js

再次執(zhí)行karma start和karma run,我們能看到生成了覆蓋率查看文件夾

目錄

在瀏覽器中打開上圖中的index.html我們能看到覆蓋率已經(jīng)生成。

index.html

點擊「unit/」我們看到app.spec.js代碼有3036行,測試覆蓋率是打包之后文件的覆蓋率,

unit/index.html

點開文件,果然是打包之后的代碼。這個覆蓋率顯然不是我們想要測試的源文件的覆蓋率。

unit/app.spec.js

怎么辦呢?想想開發(fā)時瀏覽器打開的也是編譯后的文件,我們怎么定位源碼呢?

Bingo! sourcemap。

當(dāng)然這里只用sourcemap是不夠的,測試覆蓋率神器isparta閃亮登場。

安裝:npm install --save-dev isparta isparta-loader

修改vue的js loader

karma.conf.js

再次執(zhí)行karma start和karma run,我們能看到測試覆蓋率文件已經(jīng)能找到源文件了,并且覆蓋率只有js代碼,并不包括無關(guān)的template和style,簡直太好用了有沒有。

index.html

src/index.html

src/app.vue.html

等等,怎么還有那個3000多行的文件,這個覆蓋率沒有用,能去掉嗎?答案是肯定的。我們只需要把karma.conf.js中preprocessors的coverage去掉即可。

karma.conf.js

再次執(zhí)行karma start和karma run,我們能看到覆蓋率的文件變成這樣了。

index.html

最后我們可以把karma的watch模式打開,之后只需要運行karma start就能監(jiān)控文件變動并自動執(zhí)行測試了。

karma.conf.js

至此karma+webpack搭建的vue單元測試環(huán)境就已經(jīng)ready了。

文章圖片較多,略顯拖沓,不妥之處歡迎吐槽,歡迎拍磚。

關(guān)于如何寫測試腳本,請看這篇文章Vue單元測試case寫法。

更新webpack2

以上內(nèi)容基于webpack 1.x 版本,如果使用webpack 2以上版本的話,需要將isparta-loader換成istanbul-instrumenter-loader,并使用karma-coverage-istanbul-reporter 生成測試報告。配置方法:https://github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js

相關(guān)鏈接

Vue單元測試case寫法

Karma官網(wǎng)

Vue Unit Testing

isparta loader

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實例

    Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實例

    這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結(jié)合實例形式分析了vue基于axios庫post傳送表單json格式數(shù)據(jù)相關(guān)操作實現(xiàn)技巧與注意事項,需要的朋友可以參考下
    2023-06-06
  • vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序

    vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序

    本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Vue實現(xiàn)動態(tài)路由導(dǎo)航的示例

    Vue實現(xiàn)動態(tài)路由導(dǎo)航的示例

    本文主要介紹了Vue實現(xiàn)動態(tài)路由導(dǎo)航的示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • vue2.0構(gòu)建單頁應(yīng)用最佳實戰(zhàn)

    vue2.0構(gòu)建單頁應(yīng)用最佳實戰(zhàn)

    這篇文章主要為大家分享了vue2.0構(gòu)建單頁應(yīng)用最佳實戰(zhàn)案例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • unplugin-auto-import與unplugin-vue-components安裝問題解析

    unplugin-auto-import與unplugin-vue-components安裝問題解析

    這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • vue?實現(xiàn)手動分割日期

    vue?實現(xiàn)手動分割日期

    這篇文章主要介紹了vue?實現(xiàn)手動分割日期,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)

    詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)

    這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • vue2中如何使用swiper@5.4.5

    vue2中如何使用swiper@5.4.5

    這篇文章主要介紹了vue2中如何使用swiper@5.4.5問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • 使用this.$router.go(-1)遇到的一些問題及解決

    使用this.$router.go(-1)遇到的一些問題及解決

    這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • 關(guān)于vue2使用swiper4的踩坑記錄

    關(guān)于vue2使用swiper4的踩坑記錄

    最近寫vue的一個練手項目需要在里面實現(xiàn)一個輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下
    2022-01-01

最新評論