使用karma和webpack怎么搭建一個(gè)vue單元測(cè)試環(huán)境

本篇文章給大家分享的是有關(guān)使用karma和webpack怎么搭建一個(gè)vue單元測(cè)試環(huán)境，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

目錄結(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。

目錄

安裝依賴

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

karma自己安裝的依賴

測(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和webpack怎么搭建一個(gè)vue單元測(cè)試環(huán)境，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。