Vue2.0 自動化測試（沒有腳手架）

寫在前面：

自 Vue2.0 發布以來，已經引起了前端工程師們極大的關注。我所知道的很多公司都或者將它作為了前端項目的首選，或者利用它重構自己的項目。可以遇見Vue2.0將會佔有更多的市場。所以，學習和使用Vue2.0進行項目開發，已經成為了前端工程師必備的技能了。本文，將嘗試從Vue2.0集成 單元測試 進行書寫，幫助還沒有get到這個技能的工程師們快速掌握。

關於Vue2.0的特性和它與React、Angular等等前端框架的比較，請參考我的另一篇文章《談談Vue2.0》 。

安裝Karma

全局安裝 The Karma command line interface -- karma-cli

npm install -g karma-cli

安裝karma

npm install karma --save

測試安裝結果：

karma start

顯示如上，安裝成功。

初始化karma配置

karma init

選擇測試框架，這裡選擇jasmine

選擇是否使用require.js，這裡選擇no

選擇測試使用的瀏覽器，這裡選擇phantom.js

設置測試文件存放路徑，這裡不選

後面兩項，通過之後，建立一個新的配置文件 karma.config.js

同時 , 我們看到 package.json 文件的依賴部分多出了三個：karma 、karma chrome launcher 、karma-jasmine

karma-jasmine是karma的jasmine插件，karma-phantomjs-launcher是打開phantomjs的插件

安裝依賴：

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

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

使用bable處理ES6語法，安裝babel-core、babel-loader、babel-preset-es2015

cross-env 能夠不分系統地在全局注入變數

npm install --save-dev jasmine-core webpack surge karma-webpack vue-loader vue-template-compiler css-loader babel-core babel-loader babel-preset-es2015 cross-env

安裝之後，我們的 package.json 文件依賴部分如下：

修改Karma配置：

打開karma.config.js文件，修改如下：

引入webpack，並配置webpack載入 .js、.vue、babel

並在預處理配置中，加入如下：

編寫測試案例 ：

在項目路徑下新建 test/unit/app.spec.js ，並輸入：

import Vue from "vue" ;import app from "../../src/app.vue" ;describe(test app.vue , () => { // 檢查原始組件選項 it(has a created hook, () => { expect(typeof app.created).toBe(function) })});

然後，在項目路徑中打開命令行工具，輸入：karma start

顯示如上，表示啟動成功！

在項目路徑中 再 打開一個命令行工具，輸入：karma run , 開始測試：

表示測試成功！（我這邊寫了兩個測試案例，所以出現兩個測試結果）

查看覆蓋率：

單元測試屬於白盒測試，測試覆蓋率也是測試指標之一。

karma提供了karma-coverage來查看測試覆蓋率。

安裝karma-coverage：

npm install karma-coverage --save-dev

在預處理的文件上加coverage：

在報告中使用coverage：

再次打開兩個命令行工具，執行karma start ， karma run

可以看到項目路徑中，生成了一個coverage的文件夾：

找到index.html，並用瀏覽器打開，顯示如下：

查看覆蓋率成功。

但是，我們發現這裡的home.spec.js是編譯之後的文件，所以，測試覆蓋率就是打包編譯後的覆蓋率，這並不是我們想要的。

所以，我們需要另外安裝兩個模塊：sourcemap 與 isparta

sourcemap 是資源定位的模塊

isparta 計算測試覆蓋率

npm install --save-dev sourcemap isparta isparta-loader

修改vue的js loader , 如下 ：

再次執行karma start 、karma run ，顯示如下：

我們可以看到這邊顯示了對應目錄文件的測試附帶率。

但是，我們打開unit/home.spec.js文件里還是這麼多代碼，那麼可以不要這個內容，

去掉karma.comfig.js裡面的preprocessors中的coverage設置：

再次運行karma start 、karma run 顯示如下：

如上表示成功！

自動化測試：

只需要將karma.config.js裡面的autoWatch ，改為ture即可：

錯誤統計：

關於karma init報錯信息：

錯誤原因：

因為git bash窗口是不支持minTTY

解決辦法：

使用window cmd 或者 linux shell 執行即可。

下期預告：

利用Karma書寫測試用例，測試語法的編輯。

參考鏈接：

karma+webpack搭建vue單元測試環境

推薦閱讀：