在 Karma 中测试覆盖率

最近自己用vue造轮子开发UI框架 https://zyqq.github.io/wheel/，为了使代码更健壮，采用了Karma做单元测试，并尝试测试覆盖率以检测测试质量。以下是测试覆盖率过程。

首先安装依赖

yarn add -D karma-coverage cross-env babel-plugin-istanbul

修改babel.config.js

代码语言：javascript复制

module.exports = {
  presets: [
    '@vue/app'
  ],
  // 添加以下几行代码
  env: {
    test: {
      plugins: ["istanbul"]
    }
  }
}

修改karma.conf.js, 增加以下配置

代码语言：javascript复制

    reporters: ['spec', 'coverage'],
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }

修改 package.json 的测试命令

代码语言：javascript复制

"test": "cross-env BABEL_ENV=test karma start --single-run"

之后运行`yarn test就可以看到覆盖率概览啦

也可以网页预览，打开coverage/lcov-report/index.html

可以点击具体组件查看组件代码是否被测试过

有数字表示被测过几次，标红表示没被测过

参考文档：用karma测试单文件组件

腾讯云测试服务 javascript yarn node.js babel.js

0 人点赞