前端單元測試之Karma環境搭建

前言

在前端開發中，測試經常是被忽略的一環。所以最近在研究前端自動化測試框架Karma，把我的的學習過程分享出來，但願對你們有幫助。

什麼是Karma？

Karma是由Google團隊開發的一套前端測試運行框架。它不一樣於測試框架（例如jasmine，mocha等），運行在這些測試框架之上。主要完成一下工做：

1. Karma啓動一個web服務器，生成包含js源代碼和js測試腳本的頁面；

2. 運行瀏覽器加載頁面，並顯示測試的結果；

3. 若是開啓檢測，則當文件有修改時，執行繼續執行以上過程。

Karma的安裝配置

初始項目結構

karma-example
    ├── src
         ├── index.js
    ├── test
    ├── package.json

index.js的內容以下

function isNum(num) {
  if (typeof num === 'number') {
    return true
  } else {
    return false
  }
}

安裝Karma環境

爲了方便搭建Karma環境，咱們能夠全局安裝karma-cli來幫咱們初始化測試環境：

npm i -g karma-cli

而後在項目中安裝karma包

npm i --save-dev karma

接下來在工程目錄中運行karma init來進行測試環境初始化，並按照指示一步步完成。

上圖是選項的示例，這裏使用jasmine測試框架，PhantomJS做爲代碼運行的環境（也能夠選擇其餘瀏覽器做爲運行環境，好比Chrome，IE等）。最後在項目中生成karma.conf.js文件。

至此就搭建好了基本的Karma運行環境。

運行Karma

在test目錄裏編寫一個簡單的測試腳本，咱們使用的是jasmine測試框架，具體的api能夠參考jasmine api，內容以下

describe('index.js: ', function() {
  it('isNum() should work fine.', function() {
    expect(isNum(1)).toBe(true)
    expect(isNum('1')).toBe(false)
  })
})

而後在項目根目錄下運行karma start命令,咱們能夠看到運行的結果以下

能夠看到，運行的結果顯示測試成功。

同時，由於咱們以前設置了監控文件的修改，因此當咱們修改源文件或者測試腳本的時候，Karma會自動幫咱們再次運行，無需咱們手動操做。

Coverage

如何衡量測試腳本的質量呢？其中一個參考指標就是代碼覆蓋率（coverage）。

什麼是代碼覆蓋率？簡而言之就是測試中運行到的代碼佔全部代碼的比率。其中又能夠分爲行數覆蓋率，分支覆蓋率等。具體的含義再也不細說，有興趣的能夠自行查閱資料。

雖然並非說代碼覆蓋率越高，測試的腳本寫得越好（能夠看看參考文獻4），可是代碼覆蓋率對撰寫測試腳本仍是有必定的指導意義的。所以接下來咱們在Karma環境中添加Coverage。

首先安裝好Karma覆蓋率工具

npm i --save-dev karma-coverage

而後修改配置文件karma.conf.js，

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],
    exclude: [],

    // modified
    preprocessors: {
        'src/**/*.js': ['coverage']
    },

    //modified
    reporters: ['progress', 'coverage'],

    // add
    coverageReporter: {
      type : 'html',
      dir : 'coverage/'
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

再運行karma start後，會在目錄下生成coverage目錄，裏面有本次測試的覆蓋報告。打開後的結果以下

使用Webpack+Babel

在實際項目中，有事會須要用到Webpack和ES6，因此接下來將Webpack和Babel集成進Karma環境中。

安裝karma-webpack

npm i --save-dev karma-webpack

安裝babel

npm i --save-dev babel-loader babel-core babel-preset-es2015

而後文件進行改造，src/index.js文件修改成

function isNum(num) {
  if (typeof num === 'number') {
    return true
  } else {
    return false
  }
}

exports.isNum = isNum

text/index.js文件修改成

const Util = require('../src/index')

describe('index.js: ', () => {
  it('isNum() should work fine.', () => {
    expect(Util.isNum(1)).toBe(true)
    expect(Util.isNum('1')).toBe(false)
  })
})

接下來修改配置文件karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'test/**/*.js'
    ],
    exclude: [],
    preprocessors: {
      'test/**/*.js': ['webpack', 'coverage']
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity,
    webpack: {
      module: {
        loaders: [{
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/,
          query: {
            presets: ['es2015']
          }
        }]
      }
    }
  })
}

注意這裏的修改：

1. files只留下test文件。由於webpack會自動把須要的其它文件都打包進來，因此只須要留下入口文件。

2. preprocessors也修改成test文件，並加入webpack域處理器

3. 加入webpack配置選項。能夠本身定製配置項，可是不須要entry和output。這裏加上babel-loader來編譯ES6代碼

運行karma start，成功了~

再看看Coverage，臥槽。。竟然不是百分之百了。。。

緣由很簡單，webpack會加入一些代碼，影響了代碼的Coverage。若是咱們引入了一些其它的庫，好比jquery之類的，將源代碼和庫代碼打包在一塊兒後，覆蓋率會更難看。。這樣的Coverage就沒有了參考的價值。

還好有大神給咱們提供瞭解決方案，須要安裝插件

npm i --save-dev babel-plugin-istanbul

修改webpack中babel-loader的配置

{
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules/,
  query: {
    presets: ['es2015'],
    plugins: ['istanbul']
  }
}

由於這裏引入了istanbul插件來檢測Coverage，因此要把preprocessors裏的coverage去掉。

搞定之後，運行karma start。噹噹噹當~一切OK啦，盡情編寫測試腳本把~

最後附上示例項目地址:karma-example

References

1. Karma

2. Karma using ES6

3. Jasmine API

4. 測試覆蓋（率）到底有什麼用？

5. Just Say No to More End-to-End Tests