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

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

前言

一、karma的使用

自个去搜吧,感觉讲这个的真的多。我就说一些建议。

二、karma + webpack 的使用

依旧是很多人写过了,但是还是写下吧。

配置karma + webpack

npm i karma karma-mocha karma-phantomjs-launcher karma-sinon-chai /
karma-spec-reporter karma-webpack mocha sinon sinon-chai -D
{
    "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"
    }
}
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
    })
}
 // 动态加载所有测试文件
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
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

三、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 i karma-coverage-istanbul-reporter istanbul-instrumenter-loader -D
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'
                }
            }
        }
    })
}

四、nodejs, browser测试使用同一套测试用例

{
    "scripts": {
        "node-test": "mocha --reporter spec --require\
         test/unit/common test/unit/specs/*.spec.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

五、总结

  1. 下篇看看要不探讨 ci 集成,或者 vue 的面板组件直接加载组件并且切换不会丢失状态。

  2. 原来想写 npm 包发布后来发觉满地都是,就算了。

  3. 原文地址

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看