如何使用业力，打字稿和浏览器实现代码覆盖 [英] How to do code coverage with karma, typescript, and browserify

问题描述

如何设置业力测试运行程序以生成打字稿项目的代码覆盖率报告?

How do you setup karma test runner to generate code coverage reports of a typescript project?

给出以下文件夹结构和karma.conf.js文件，我已经在使用karma来运行用TypeScript编写的测试.

Given the following folder structure and karma.conf.js file I'm already using karma to run my tests written in TypeScript.

我已经摆弄着karma-coverage和remap-istanbul，但是还没有运气.如果可能的话，我希望不添加任何npm scripts.

I already fiddled around with karma-coverage and remap-istanbul but without any luck yet. If possible I'd like to do it without any additional npm scripts.

.
├── karma.conf.js
├── package.json
├── src
│   └── add.ts
├── test
│   └── addSpec.ts
├── tsconfig.json
├── typings
│   ├── globals
│   └── index.d.ts
└── typings.json

karma.conf.js

karma.conf.js

var istanbul = require('browserify-istanbul');

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon', 'browserify'],
    files: [
      'test/**/*Spec.ts'
    ],
    exclude: [
    ],
    preprocessors: {
      'test/**/*Spec.ts': ['browserify']
    },
    browserify: {
      debug: true,
      plugin: ['tsify'],
      transform: [
        istanbul({irgnore: ['**/node_modules/**']})
      ]
    },
    reporters: ['progress', 'coverage']
  })
}

更新1:

通过将browserify-istanbul添加到设置中，我取得了一些进步.我认为总体指标还不错，但是源文件视图有点奇怪.

Update 1:

I made some progress by adding browserify-istanbul to the setup. I think the overall metrics are fine but the source file view is a bit odd.

addSpec.ts

addSpec.ts

import { add } from '../src/add'
const expect = chai.expect

describe('test add module', () => {
  it('should add 2 numbers', () => {
    expect(add(2, 2)).to.be.equal(4)
  })
})

更新2:

直到今天，我仍无法找到一种使用browserify和Typescript创建集成"业力设置的方法.不过，我有另一种对我有用的解决方案.

Update 2:

Until today I could not figure out a way to create an "integrated" karma setup with browserify and typescript. Nevertheless I have a different solution that is working for me.

karma.conf.js

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['source-map-support', 'mocha'],
    files: [
      'test/**/*Spec.ts'
    ],
    exclude: [],
    preprocessors: {
      'test/**/*Spec.ts': ['webpack']
    },
    webpack: {
      devtool: 'inline-source-map',
      resolve: {
        extensions: ['', '.ts', '.js']
      },
      module: {
        loaders: [
          { test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader', query: { compilerOptions: { inlineSourceMap: true }} }
        ],
        postLoaders: [
          { test: /\.ts$/, include: /src/, loader: 'istanbul-instrumenter' }
        ]
      }
    },
    webpackMiddleware: {
      noInfo: true
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      dir: 'coverage',
      reporters: [
        { type: 'json', subdir: '.', file: 'coverage.json' }
      ]
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Electron'],
    singleRun: false,
    concurrency: Infinity
  })
}

package.json

package.json

{
  ...
  "scripts": {
    "test": "rimraf coverage && karma start --single-run && npm run coverage",
    "coverage": "npm run coverage:remap && npm run coverage:report",
    "coverage:remap": "remap-istanbul -i coverage/coverage.json -o coverage/coverage.json -t json",
    "coverage:report": "istanbul report html"
  },
  ...
}

推荐答案

安装 karma-typescript :

npm install karma-typescript --save-dev

将其放入您的karma.conf.js:

Put this in your karma.conf.js:

frameworks: ["jasmine", "karma-typescript"],

files: [
    { pattern: "src/**/*.ts" }
],

preprocessors: {
    "**/*.ts": ["karma-typescript"]
},

reporters: ["progress", "karma-typescript"],

browsers: ["Chrome"]

这将即时运行您的Typescript单元测试，并生成如下所示的Istanbul html报道:

This will run your Typescript unit tests on the fly and generate Istanbul html coverage that look like this:

不需要npm脚本等，所有魔术都发生在插件中.

No need for npm scripts etc, all the magic happens in the plugin.

这篇关于如何使用业力，打字稿和浏览器实现代码覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！