【vue系列】vue2.0 項目配置 Mocha 單元測試

咱們團隊中的項目衆多，基本上都沒有配置單元測試，其中一個 vue2.0 項目是咱們的主站項目，很早以前我就想給這個項目加上單測，只是一直忙於業務就沒顧上。正巧立刻過年了，最近需求很少，忙完需求，就開始搞搞單測。

從有配置單測的想法我就一直在思考，咱們這個項目是否真的須要加單測，咱們要測試什麼，那麼多的測試運行器又該怎麼選擇，以及怎麼在團隊中推行單測。基於這些思考，開始實施了。

咱們是否真的須要單元測試

目前整個團隊的全部的項目都沒單測，而其它團隊的項目不少都有對應的測試工具，總以爲咱們技術棧少了點什麼。這雖然是我要加單測的充分條件，倒是我想配置單測的初衷。

項目背景

其次咱們這個項目維持了四五年，進行了至少4次項目架構重構的升級，這個項目中有主要有 v7 版、v8 版，總計 近200 個頁面，目前大部分的業務都在 v8 版。固然咱們還有 v9 版，因爲項目業務不斷增多，不得不對倉庫進行拆分，v9版 是基於 vue-cli 搭建的的一個新倉庫，這裏就不在贅述了。前兩版的技術棧選型分別是：

• v7版 juicer + jQuery
• v8版 vue2.0 + webpack

就現狀來看，給v8版配置單測比較合適，一方面主要業務在v8上，另外一方面從使用的 vue2.0 + webpack 技術棧來看，更適合寫單元測試。

預期指望

我指望給 v8 版的公共組件和工具方法都加上單元測試，這對團隊代碼的可靠性驗證來講確定是有益的。後期迭代，也能夠經過單測防止意外狀況的發生。嗯，這就是要加單測的必要條件吧。

除此以外，組件的單元測試還能夠爲咱們帶來更多的好處：

• 提供描述組件行爲的文檔
• 節省手動測試的時間
• 減小研發新特性時產生的 bug
• 改進設計
• 促進重構

自動化測試能夠幫助團隊中的開發者能夠維護複雜的基礎代碼。單元測試是測試體系中最有用的，即能幫助開發者思考如何設計一個組件，又能夠幫助開發者重構一個現有組件。

一開始，當你們對一個項目的添加單測的願景還不夠清晰的時候，單元測試可能會拖慢開發進度，可是一旦你們的願景創建起來而且有真實的用戶對這個應用產生興趣，那麼單元測試就是絕對有必要的了，它們會確保基礎代碼的可維護性和可擴展性。

如何選擇測試運行器

單元測試應該具有：

• 能夠快速運行
• 易於理解
• 只測試一個獨立單元的工做

Vue Test Utils 是 Vue 組件單元測試的官方庫，官方推薦兩個測試運行期：

• Jest 是功能最全的測試運行器。它所需的配置是最少的，默認安裝了 JSDOM，內置斷言且命令行的用戶體驗很是好。不過你須要一個可以將單文件組件導入到測試中的預處理器。咱們已經建立了 vue-jest 預處理器來處理最多見的單文件組件特性，但仍不是 vue-loader 100% 的功能。
• mocha-webpack 是一個 webpack + Mocha 的包裹器，同時包含了更順暢的接口和偵聽模式。這些設置的好處在於咱們可以經過 webpack + vue-loader 獲得完整的單文件組件支持，但這自己是須要 不少配置 的。

我我的更偏向於 mocha-webpack，畢竟測試單文件組件，上手又快、功能又全。

配置 mocha 單元測試

瀏覽器環境 Vue Test Utils 依賴瀏覽器環境，用 JSDOM 在 Node 虛擬瀏覽器環境運行測試。

Vue 的單文件組件在它們運行於 Node 或瀏覽器以前是須要預編譯的。咱們直接使用 webpack。針對 mocha 須要基於 webpack + vue-loader 進行設置。

選擇了 mocha-webpack 測試單文件組件，是經過 webpack 編譯全部的測試文件而後在測試運行器中運行。這樣作的好處是能夠徹底支持全部 webpack 和 vue-loader 的功能。mocha-webpack 可以提供了很是流暢的體驗。

1. 設置 mocha-webpack

v8項目基於已經安裝並配置好了 webpack、vue-loader 和 Babel。首先要作的是安裝測試依賴：

npm install --save-dev @vue/test-utils mocha mocha-webpack
複製代碼

在 package.json中定義一個測試腳本。

// package.json
{
  "scripts": {
    "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
  }
}
複製代碼

2. 暴露 NPM 依賴

將依賴外置以提高測試的啓動速度，經過 webpack-node-externals 外置全部的 NPM 依賴：

// webpack.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  externals: [nodeExternals()]
}

複製代碼

3. 源碼錶

源碼錶在 mocha-webpack 中須要經過內聯的方式獲取。推薦配置爲：

module.exports = {
  // ...
  devtool: 'inline-cheap-module-source-map'
}
複製代碼

4. 設置瀏覽器環境

Vue Test Utils 須要在瀏覽器環境中運行。咱們能夠在 Node 中使用 jsdom-global 進行模擬：

npm install --save-dev jsdom jsdom-global
複製代碼

而後在 test/setup.js 中寫入：

npm install --save-dev jsdom jsdom-global
複製代碼

這行代碼會在 Node 中添加一個瀏覽器環境，這樣 Vue Test Utils 就能夠正確運行了。

5. 選用 expect 斷言庫

推薦 Jasmine/Jest 風格的 expect 斷言

npm install --save-dev expect
複製代碼

而後在 test/setup.js 中編寫：

require('jsdom-global')()

global.expect = require('expect')
複製代碼

6. 爲測試優化 Babel

mocha 是比較經常使用的 node 測試框架，可是隻支持 commonjs 模塊，要讓 mocha 支持 ES6 模塊，須要 babel的幫助。babel-loader 將會自動使用相同的.babelrc配置文件。

寫單測的注意事項

• describe 測試套件
• 每一個 it 塊只作一個斷言，it塊稱爲"測試用例"
• 讓測試描述更簡短清晰
• 只提供測試須要的最小化數據
• 把重複的邏輯重構到了一個工廠函數中

小結：

目前已經寫了一些單測，預期是給公共組件和工具類函數都加單測。業務需求示狀況添加單測。

Vue 組件單元測試的通常思路：渲染這個組件，而後斷言這些標籤是否匹配組件的狀態。

一般，在實現完成後添加測試時，開發們傾向於接受程序生成的輸出，而沒必要經過手動計算仔細檢查結果。 將要求轉化爲可僞造的測試。

疑問

好像已經造成了習慣，每次都會留下一些疑問，後面慢慢解疑吧。

• 如何在組件中測試 Vue-router
• 如何在組件中測試 Vuex
• 如何提高測試的啓動速度？
• chai斷言庫與 Jest的 expect 有什麼區別
• Sinon 是什麼
• mixin、watch、computed如何添加單測

參考

• mocha官網
• mocha-webpack
• jest/expect
• Vue Test Utils 官網
• 使用 Mocha 的示例工程