搭建一個由 karma + mocha + chai + Istanbul + es6 + webpack 組成的基礎測試工具

Karma+Mocha

目的

搭建一個由 karma + mocha + chai + Istanbul + es6 + webpack 組成的基礎測試工具

---

工具的簡單介紹

測試框架

Mocha

mocha是JavaScript的一種單元測試框架，既可以在瀏覽器環境下運行，也可以在Node.js環境下運行。
使用mocha，我們就只需要專注於編寫單元測試本身，然後，讓mocha去自動運行所有的測試，並給出測試結果。
mocha的特點主要有：

1. 既可以測試簡單的JavaScript函數，又可以測試異步代碼，因爲異步是JavaScript的特性之一；

1. 可以自動運行所有測試，也可以只運行特定的測試；

1. 可以支持before、after、beforeEach和afterEach來編寫初始化代碼。

測試框架Mocah實例教程
廖雪峯js教程

---

Chai斷言庫

chai 提供了三種斷言風格來分別適用於 BDD 和 TDD。expect/should API 對應BDD風格，Assert API 對應TDD風格。

Chai官網API Reference
Chai.js斷言庫API中文文檔

前端測試工具

Karma

Karma是一個基於 Node.js 的 JavaScript 測試執行過程管理工具（Test Runner）。該工具可用於測試所有主流Web瀏覽器，也可集成到 CI（Continuous integration）工具，也可和其他代碼編輯器一起使用。這個測試工具的一個強大特性就是，它可以監控(Watch)文件的變化，然後自行執行，通過console.log顯示測試結果。

Karma官網

---

Istanbul

測試的時候，我們常常關心，是否所有代碼都測試到了。
這個指標就叫做"代碼覆蓋率"（code coverage）。它有四個測量維度。

• 行覆蓋率（line coverage）：是否每一行都執行了？
• 函數覆蓋率（function coverage）：是否每個函數都調用了？
• 分支覆蓋率（branch coverage）：是否每個if代碼塊都執行了？
• 語句覆蓋率（statement coverage）：是否每個語句都執行了？

代碼覆蓋率工具 Istanbul 入門教程

實踐

文件結構概覽

karma_mocha-----項目文件夾
|
|—node_modules-----項目依賴
|
|—src
|------add.js-----待測文件
|
|—test
|------coverage-----自動生產的報告文件夾
|------mochaDemo
|---------add.spec.js-----測試用例文件
|------karma.conf.js-----karma配置文件
|
|—.babelrc-----babel配置文件
|—package.json-----npm配置文件
|—webpack.config.js-----webpack配置文件

---

初始化配置

karma配置

const webpack = require('../webpack.config.js')
module.exports = function(config) {
    config.set({
      basePath: '',
      port:1010,
      // 自動啓用Chrome瀏覽器執行代碼 karma-chrome-launcher
      browsers: ['Chrome'],
      // 告訴karma用的測試框架（mocha）和斷言庫 (karma-chai)
      frameworks: ['mocha','chai'],
      // 測試報告的顯示格式（命令行內的顯示格式）  karma-mocha-reporter
      // 測試覆蓋率報告  karma-coverage
      reporters: ['spec', 'coverage'],
      //colors 報表中是否有顏色區分
      colors:true,
      // 將功能代碼和測試代碼加載到karma
      files: [
        'mochaDemo/**/*.spec.js'
      ],
      //排除文件，可以是正則
      exclude:["karma.conf.js"],
      //對指定文件的預處理
      preprocessors: {
        'mochaDemo/add.spec.js': ['webpack']
      },
      // webpack
      webpack: webpack,
      // 測試時忽略打包信息
      webpackMiddleware: {
        noInfo: true
      },
      // 生成的覆蓋率報告 配置項
      // coverageReporter: {
      //   type : 'html',
      //   dir : 'coverage/'
      // }
      coverageReporter: {
        dir: './coverage',
        reporters: [
          { type: 'lcov', subdir: '.' },
          { type: 'text-summary' } //在控制檯輸出摘要
        ]
      },
      // 檢測文件變動 文件變動自動執行測試文件
      autoWatch: true,
      // 輸出的日誌級別
      // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
      logLevel: config.LOG_INFO,
      //是否依附瀏覽器運行
      singleRun:false,
      //併發數，同時支持多少個瀏覽器運行
      concurrency:Infinity
    });
  };

babel配置

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "istanbul"]  
    }
  }
}

webpack配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

package.json修改腳本

"scripts": {
    "test": "cross-env BABEL_ENV=test karma start test/karma.conf.js"
  }

安裝依賴

		"babel-core": "^6.26.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "chai": "^4.2.0",
    "cross-env": "^5.2.0",
    "karma": "^4.0.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.2",
    "karma-mocha": "^1.3.0",
    "karma-spec-reporter": "0.0.32",
    "karma-webpack": "^2.0.2",
    "mocha": "^6.0.2",
    "webpack": "^3.6.0"
    "babel-plugin-istanbul": "^4.1.1"

---

功能測試demo

待測文件

//add.js
function add(x, y) {
  return x + y
}

module.exports = add;

測試用例

//add.spec.js
var add = require('../../src/add.js');
var expect = require('chai').expect;

describe('加法函數的測試', function() {
  it('1 加 1 等於 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  });
});

---

接口測試demo

接口測試使用了chai的插件chai-http，詳見chai-http官網。
另外還有supertest等其他http測試工具。

karma.conf.js增加proxies配置項，用於代理跨域請求。

module.exports = function(config) {
    config.set({
      ...
      //代理
      proxies: {
        '/': 'http://192.168.23.170:29548'
      }
    });
};

添加http請求測試

...
var chai = require('chai');
var chaiHttp = require('chai-http');
chai.use(chaiHttp);
describe('接口測試', function() {
	...
  it('請求數據庫列表接口成功', done => {
    chai
      .request("http://localhost:1010")	// 這個端口爲karma.conf.js中配置的port端口
      .post('/djtest/projectConfig/listDataBase.do')
      .set('Content-Type', 'application/json')
      .send({
        'fprojectId': '',
        'fsort': '',
        'pagenum': 1,
        'pagesize': 10
      })
      .end((err, res) => {
        if (err) {
          done();
        }
        let data = JSON.parse(res.text);
        expect(data.success).to.be.true;
        done();
      });
  });
});

在終端執行npm run test

控制檯可看到輸出結果

test目錄下生成coverage文件夾，打開index.html

---

在vue項目中的使用

Vue Test Utils 是 Vue.js 官方的單元測試實用工具庫。
安裝依賴：
npm install --save-dev @vue/test-utils

import ElementUI from "element-ui";
import vueComponent from "@/demo/vueComponent.vue"; // 待測vue組件
import { createLocalVue, mount } from "vue-test-utils"; // vue-test-utils提供的方法

const localVue = createLocalVue(); 
// 返回一個 Vue 的類供你添加組件、混入和安裝插件而不會污染全局的 Vue 類

localVue.use(ElementUI); // 註冊element ui
const wrapper = mount(dataBaseManagement, {
  localVue
}); // 創建一個包含被掛載和渲染的 Vue 組件的 Wrapper

// 開始編寫測試用例

---

參考文章：

前端測試的那些事