karma 使用 webpack 的代码覆盖率测试

1
2

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

1
2
3
4
5
6
7

{
    "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"
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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
    });
};

1
2
3

// 动态加载所有测试文件
const testsContext = require.context("./specs", true, /\.spec$/);
testsContext.keys().forEach(testsContext);

1
2
3
4
5

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

1
2
3
4

# 开启 karma 动态构建
npm run karma-start
# new shell，运行一次测试
npm run karma-run

1

npm run karma-single

1

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

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'
                }
            }
        }
    })
}

1
2
3
4
5
6

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

1
2
3
4
5
6
7

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);