karma使用webpack的代碼覆蓋率測試

前言

• 距離上一次博客有2個月了，倒不是沒有可寫東西就是提不起勁寫。

• 不說這些了此次寫下我使用 karma + webpack 中遇到的代碼覆蓋率問題。

1、karma的使用

自個去搜吧，感受講這個的真的多。我就說一些建議。

• karma的測試框架改用mocha這樣對於一個須要nodejs, browser測試的測試用例能夠共用。具體的能夠看個人 marked-zm

2、karma + webpack 的使用

依舊是不少人寫過了，可是仍是寫下吧。

配置karma + webpack

• 須要的 npm 包

npm i karma karma-mocha karma-phantomjs-launcher karma-sinon-chai /
karma-spec-reporter karma-webpack mocha sinon sinon-chai -D

• package.json

{
    "scripts": {
        "karma-run": "karma run",
        "karma-start": "karma start test/unit/karma.conf.js",
        "karma-single": "karma start test/unit/karma.conf.js --single-run"
    }
}

• test/unit/karma.conf.js

module.exports = function(config) {
    config.set({
        webpack: {
            devtool: 'inline-source-map', // 推薦使用inline-source-map
            module: {
                rules: [/* loaders */]
            }
        },
        frameworks: ['mocha', 'sinon-chai'], // 測試框架隨便必定要要和我同樣
        files: [
            './index.js' // 推薦使用一個入口來導入全部的測試。
        ],
        preprocessors: {
            './index.js': ['webpack'] // 使用什麼配置
        },
        reporters: ['spec'], // spec顯示插件
        port: 9876, // 端口
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        singleRun: false
    })
}

• test/unit/index.js

// 動態加載全部測試文件
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

• test/unit/specs/test.spec.js

describe('Test', function() {
    it('test 1+1', function () {
        expect(1 + 1).to.equal(2)
    })
})

運行karma + webapck測試

# 開啓 karma 動態構建
npm run karma-start
# new shell，運行一次測試
npm run karma-run

或者直接單次構建並測試

npm run karma-single

3、karma + webpack 的代碼覆蓋率測試

這裏若是直接用 karma-coverage 會出現直接對 karma 配置中入口文件生成的 webpack 代碼的代碼覆蓋率測試。會出現不少 webpack 生成的額外代碼。

並且也不是源代碼的代碼覆蓋率測試。

這裏有兩個方案:

1. karma-coverage + isparta-loader
   來自 element-ui 而後去看 isparta-loader 發覺做者已經廢棄推薦換到 istanbul-instrumenter-loader 因此這個我也不用了，直接看另外一個方案吧。

2. karma-coverage-istanbul-reporter + istanbul-instrumenter-loader
   這兩個包除了 README 的說明沒有找到更多的資料，只好本身試着用，下面直接看如何使用吧。

配置 karma + webpack 的代碼覆蓋率測試

• 須要的其它 npm 包

npm i karma-coverage-istanbul-reporter istanbul-instrumenter-loader -D

• test/unit/karma.conf.js

const path = require('path')
const srcPath = path.resolve(__dirname, '../../src')
module.exports = function(config) {
    config.set({
        webpack: {
            devtool: 'inline-source-map', // 推薦使用inline-source-map
            module: {
                rules: [
                    // 像eslint-loader同樣使用,並限定在源碼上。
                    {
                        test: /\.js$/,
                        enforce: 'pre',
                        use: 'istanbul-instrumenter-loader',
                        inclues: [srcPath]
                    }
                    /* loaders */
                ]
            }
        },
        frameworks: ['mocha', 'sinon-chai'], // 測試框架隨便必定要要和我同樣
        files: [
            './index.js' // 推薦使用一個入口來導入全部的測試。
        ],
        preprocessors: {
            './index.js': ['webpack'] // 使用什麼配置
        },
        // 增長代碼覆蓋率輸出插件
        reporters: ['spec'，'coverage-istanbul'], 
        port: 9876, // 端口
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        singleRun: false,
        // 配置代碼覆蓋率插件
        coverageIstanbulReporter: {
            // 以什麼格式, 這裏設置了輸出 html文件 ,info文件 ,及控制檯
            reports: ['html', 'lcovonly', 'text-summary'],
            // 將文件輸出路徑定位
            dir: path.join(__dirname, 'coverage'),
            // 修正 weback 路徑（翻譯了是這個意思）
            fixWebpackSourcePaths: true,
            // 將生成的html放到./coverage/html/下
            'report-config': {
                html: {
                    subdir: 'html'
                }
            }
        }
    })
}

• 代碼參考 vue-dragging or marked-zm

4、nodejs, browser測試使用同一套測試用例

• package.json

{
    "scripts": {
        "node-test": "mocha --reporter spec --require\
         test/unit/common test/unit/specs/*.spec.js"
    }
}

• test/unit/common.js

global.chai = require("chai")
global.should = require("chai").should()
global.expect = require("chai").expect
global.AssertionError = require("chai").AssertionError
const sinonChai = require("sinon-chai")

chai.use(sinonChai)

無需修改其它代碼見 marked-zm

5、總結

1. 下篇看看要不探討 ci 集成，或者 vue 的面板組件直接加載組件而且切換不會丟失狀態。

2. 原來想寫 npm 包發佈後來發覺滿地都是，就算了。

3. 原文地址