typescript - Cómo hacer cobertura de código con karma, mecanografiado y browserify

karma-runner istanbul

Question

¿Cómo configura karma test runner para generar informes de cobertura de código de un proyecto mecanografiado?

Dada la siguiente estructura de carpetas y el archivo karma.conf.js, ya estoy usando karma para ejecutar mis pruebas escritas en TypeScript.

Ya jugueteaba con karma-coverage y el remap-istanbul pero aún sin suerte. Si es posible, me gustaría hacerlo sin ningún npm scripts adicional.

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

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

Actualización 1:

Hice algunos progresos agregando browserify-istanbul a la configuración. Creo que las métricas generales están bien, pero la vista del archivo fuente es un poco extraña.

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

Actualización 2:

Hasta hoy no pude encontrar una manera de crear una configuración de karma "integrada" con browserify y mecanografiado. Sin embargo tengo una solución diferente que está funcionando para mí.

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

paquete.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"
  },
  ...
}

Answer 1

Instala karma-typescript :

npm install karma-typescript --save-dev

Pon esto en tu karma.conf.js:

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

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

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

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

browsers: ["Chrome"]

Esto ejecutará tus pruebas unitarias de Typescript sobre la marcha y generará una cobertura html de Estambul que se verá así:

No se necesitan scripts npm, etc., toda la magia ocurre en el complemento.