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

在預處理選項中添加webpack處理的文件聪姿。這里我們用webpack處理測試用例。

karma.conf.js

編寫第一個測試

編寫一個測試用例來運行乙嘀，我們先測試下app.vue文件加載后title值是否符合預期末购。新建test文件夾，test文件夾下建立unit文件夾虎谢，unit文件夾下建立app.spec.js文件盟榴。目錄結(jié)構(gòu)如下：

目錄

app.spec.js內(nèi)容如下

test/unit/app.spec.js

在當前目錄打開命令行，輸入karma start婴噩，這時karma會啟動一個服務來監(jiān)聽測試擎场。

karma start

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

karma run

查看測試覆蓋率

單元測試屬于白盒測試章蚣，測試覆蓋率也是測試指標之一站欺。karma提供了karma-coverage來查看測試覆蓋率。

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

配置覆蓋率，在預處理的文件上加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。

當然這里只用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