基於Karma的前端單元測試實踐初探

在平常前端開發中，前端的工做多數是是編寫業務層級代碼，因爲業務層級代碼變化較大，前端開發中鮮少涉獵到單元測試這一步驟。然而隨着工程不斷的複雜化、代碼復 用性變高的狀況下，前端工程中的單元測試流程顯得尤其必要。

單元測試是什麼

對於前端開發過程當中而言，咱們須要使用測試框架、測試用例等來檢測咱們的代碼，最後得出特定的結果。對於JavaScript，也就是針對函數、模塊及對象的測試。

測試方法論

單元測試一般基於兩個經常使用的方法論：TDD模式與BDD模式

TDD（測試驅動開發）

其基本思路是經過測試來推進開發進行，一種測試先於編寫代碼的思想。

在開發功能代碼以前，先編寫單元測試用例代碼，測試代碼肯定須要編寫什麼產品代碼。測試以後，須要重構優化代碼，循環以上步驟直到每一個單元都按須要運行。

BDD（行爲驅動開發）

想對於TDD中側重偏向開發的思路而言，BDD更側重於設計，提倡使用通用的語言將系統的行爲更爲語義化地描述出來，將系統設計和測試用例相結合。所以，其代碼表達更像是用文檔的形式描述出一個個具體的執行行爲。

如何進行單元測試

針對前端單元測試，咱們須要至少三個工具來進行。

斷言庫

斷言庫用於描述具體測試的API，可以讓咱們的測試代碼更加語義化。常見使用的斷言庫有Node中的Assert模塊、Should.js、Chai.js等。

assert.equal(1, 2) 
(1).should.equal(1) 
expect(1 + 1).to.be.equal(2)
複製代碼

上述代碼中，Chai與Should爲上文提到的BDD風格，其中expect指向chai.expect，使用了鏈式語言來書寫斷言語句。咱們經過斷言庫提供的API，能夠判斷預設的執行語句結果是否正確。

測試框架

測試框架做爲單元測試的核心，提供了測試所須要的API。Mocha是一個功能豐富的測試框架，它既能夠基於Node.js，也能夠在瀏覽器環境運行。

describe('Array', function() {
 describe('#indexOf()', function() {
   it('should return -1 when the value is not present', function() {
     assert.equal(-1, [1, 2, 3].indexOf(4))
   })
 })
})
複製代碼

以上是使用mocha框架書寫的測試腳本，其中腳本中應該包含一個以上的describe塊，每一個describe中包含一個以上的it塊。

• describe塊表示一組相關的測試，其第一個參數爲測試的名稱，第二參數是執行的函數。
• it塊表示一個單獨的測試，其第一個參數爲測試用例名稱，第二個參數爲執行函數。

測試腳本後綴一般爲.test.js。爲了跑通該測試用例，咱們須要安裝好Mocha。

npm i mocha -g
複製代碼

在文件目錄中運行mocha命令後，能夠在終端看到以下提示

Array
    #indexOf()
      ✓ should return -1 when the value is not present


  1 passing (6ms)
複製代碼

該結果表示經過測試，耗時6ms。

測試管理工具

測試管理工具用以管理整個測試流程，其可以將測試框架、斷言庫、測試用的瀏覽器與相關的測試的代碼結合在一塊兒並運行。經常使用的管理工具備Karma，一個基於Node的管理工具，可支持多種主流瀏覽器，而且其支持實時的文件監聽。

初始化配置環境

首先全局安裝Karma

npm i karma-cli -g
複製代碼

再經過npm init與npm i karma -D安裝初始化相關依賴，最後使用karma init命令完成初始化配置:

配置完成以後會在目錄下生成一份 karma.conf.js文件，其中包含了部分上述配置。此外，咱們須要修改該文件，配置斷言庫及相關plugins。

frameworks: ['mocha', 'chai'] // 使用Chai做爲斷言庫
複製代碼

幾乎全部的karma插件都須要(經過NPM)額外的庫來安裝，一般庫的名字爲karma-*的形式。如使用should.js，則需引入karma-should。

// 配置相關插件
plugins: [
  'karma-mocha',
  'karma-chai',
  'karma-chrome-launcher'
]
複製代碼

對應的咱們須要安裝相關的依賴包，生成以下package.json：

"devDependencies": {
    "chai": "^4.2.0",
    "karma": "^4.2.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-mocha": "^1.3.0",
    "mocha": "^6.2.0"
  }
複製代碼

編寫測試代碼

基礎配置完成後，如今開始書寫測試代碼。在karma init配置中，目錄關聯文件的路徑我設置了test/*.js和src/*js，這就是告訴Karma須要被測試的代碼與測試代碼放在src/與test/文件夾中。

在src/文件夾中新建index.js文件，添加一個簡單的加法運算函數:

// src/index.js
function add(a, b) {
  return a + b
}
複製代碼

上文提到測試腳本後綴一般爲.test.js，因而咱們接着在test/文件夾中新建index.test.js：

describe('index.test.js測試', function () {
  it('1 + 1 should be 2', function() {
      expect(add(1, 1)).equal(2)
  })
})
複製代碼

測試代碼書寫完畢後，咱們在目錄下運行：

karma init
複製代碼

運行成功後，咱們在終端能夠到運行結果。

回到karma.conf.js文件中，咱們能夠看到files相應配置:

即咱們會在頁面中加載命中的文件。咱們能夠在彈出的瀏覽器頁面中點擊Debug按鈕，並查看彈出頁面的源代碼，此時咱們會發現 test/與 src/下的js文件經過script標籤進行加載，所以咱們能夠在 index.test.js中使用 src/目錄下js文件定義的函數。

由此，咱們能夠經過另外一種方式來配置斷言庫，即僅須要在在 karma.conf.js中的 files添加 'node_modules/chai/chai.js'。

統計測試覆蓋率

單元測試在不少狀況下須要統計代碼測試覆蓋率，咱們能夠藉助第三方庫生成報告並看到相關的指標。咱們但願能夠藉助覆蓋率的檢查，去思考如何更好的設計並重構代碼，讓咱們的代碼更有質量。

這裏咱們使用karma-coverage來統計測試覆蓋率。一樣地，咱們須要修改karma.conf.js文件。

preprocessors: {
  'src/*.js': ['coverage'] // 預處理器映射
},
reporters: ['progress', 'coverage'] // 使用的報告者（reporter）列表。
複製代碼

此外還須要安裝karma-coverage，並在plugins中配置。而後再運行karma-start，咱們會發現目錄下多出了一個coverage文件夾，打開該文件夾下的index.html文件，咱們就在瀏覽器中看到生成的覆蓋率報告。

結合Vue項目

利用Vue-CLI初始化項目時，可勾選unit test項，默承認選擇mocha + chai組合。

生成項目後，在目錄下可看到test/文件夾。其結構與上述Mocha編寫單元測試相似。

// test/specs/vue.spec.js
import Vue from 'vue';
import HelloWorld from '@/HelloWorld';

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    assert(vm.$el.querySelector('.hello h1').textContent === 'Welcome to Your Vue.js App')
  })

})
複製代碼

其默認生成的測試用例爲，測試HelloWorld組件中msg變量是否爲指定值。再運行yarn test:unit命令後，可觀察到終端輸出：

WEBPACK  Compiled successfully in 3756ms

 MOCHA  Testing...

  HelloWorld.vue
    ✓ renders props.msg when passed

  1 passing (31ms)

 MOCHA  Tests completed successfully

✨  Done in 6.79s.
複製代碼

總結

以前的工做中僅僅是基於框架，爲基礎組件庫編寫一些簡單的單元測試，缺少對其系統的探索。這次的嘗試算是對單元測試的一個入門實踐。其中Karma還有更爲強大豐富的配置，而且可將項目經過Github接入Travis CI，利用CI能力來完成構建與測試的工做，提升開發效率。