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

Cc_2011 發布于2019-08-22 10:38 / 1740人閱讀

摘要：主要完成一下工作啟動一個服務器，生成包含源代碼和測試腳本的頁面運行瀏覽器加載頁面，并顯示測試的結果如果開啟檢測，則當文件有修改時，執行繼續執行以上過程。如果我們引入了一些其它的庫，比如之類的，將源代碼和庫代碼打包在一起后，覆蓋率會更難看。。

前言

在前端開發中，測試常常是被忽略的一環。因此最近在研究前端自動化測試框架Karma，把個人的學習過程分享出來，希望對大家有幫助。

什么是Karma？

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

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

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

如果開啟檢測，則當文件有修改時，執行繼續執行以上過程。

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"]
          }
        }]
      }
    }
  })
}

注意這里的修改：

files只留下test文件。因為webpack會自動把需要的其它文件都打包進來，所以只需要留下入口文件。

preprocessors也修改為test文件，并加入webpack域處理器

加入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

Karma

Karma using ES6

Jasmine API

測試覆蓋（率）到底有什么用？

Just Say No to More End-to-End Tests

GPU云服務器云服務器快速搭建php運行環境之wampserver 前端開發環境搭建測試環境搭建測試環境怎么搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90974.html

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

摘要：主要完成一下工作啟動一個服務器，生成包含源代碼和測試腳本的頁面運行瀏覽器加載頁面，并顯示測試的結果如果開啟檢測，則當文件有修改時，執行繼續執行以上過程。如果我們引入了一些其它的庫，比如之類的，將源代碼和庫代碼打包在一起后，覆蓋率會更難看。。前言在前端開發中，測試常常是被忽略的一環。因此最近在研究前端自動化測試框架Karma，把個人的學習過程分享出來，希望對大家有幫助。什么是Kar...

mrli2016 2019-05-29 16:59 評論0 收藏0
使用karma+mocha+chai+sinon+@vue/test-utils為你的組件庫增加單元

摘要：但是，項目中的一些公共封裝，比如公共的組件公用的功能模塊等是可以使用單元測試的。因此特為組件庫引入單元測試，目的在于能減少組件的，避免重復的發布不必要的包。項目github地址：https://github.com/yuanalina/installAsRequired這里必須要提前說明，前端項目的單元測試不是必須的，特別是業務型項目，增加單元測試反而會成為累贅，增加開發成本且無意義...

happen 2019-08-23 14:53 評論0 收藏0
前端單元測試（未完。。）

摘要：基礎知識作用為提供瀏覽器測試環境，為真正測試框架，為斷言庫測試用例基礎塊稱為測試套件，表示一組相關的測試。它也是一個函數，第一個參數是測試用例的名稱，第二個參數是一個實際執行的函數。基礎知識 karma作用為提供瀏覽器測試環境，mocha為真正測試框架，chai為斷言庫測試用例基礎 describe塊稱為測試套件（test suite），表示一組相關的測試。它是一個函數，第一個...

ACb0y 2019-08-23 15:23 評論0 收藏0
前端組件的測試

摘要：的配置文件是為了解析那些需要測試的源文件相關的文件，然后再給的單元測試用例去識別。其作用是僅僅渲染至虛擬節點，不會返回真實的節點，能極大提高測試性能。為解放勞動力，發展生產力測試有了這般變化：鼠標點擊手動測試 -> 用腳本模擬,自動化測試 Vue中的組件測試需要安裝的包全局安裝：babel、mocha、karma 其他局部安裝的包在下面的【測試環境搭建】最下方配置文件中給出...

haobowd 2019-08-22 15:10 評論0 收藏0
Angular單元測試系列-簡介

摘要：單元測試我們可以將其分成兩類獨立單獨測試與測試工具集。工具集還有更多，這一切我們將在單元測試組件與指令單元測試逐一說明。那么下一篇，我們將介紹如何使用進行單元測試。本文將探討如何搭建測試環境、以及Angular測試工具集。測試環境絕大部分都是利用Angular Cli來創建項目，因此，默認已經集成我們所需要的npm包與腳本；當然，如果你是使用自建或官網 quickstart 的話...

CNZPH 2019-08-21 11:43 評論0 收藏0