karma-remap-istanbul is generating the coverage htmls next to source

Question

I am trying to setup unit testing for my Aurelia (+ webpack + TypeScript) website. My karma.conf.js looks as follows (similar to what is done in aurelia-navigation skeleton):

"use strict";
const path = require('path');

module.exports = function (config) {
  config.set({
    basePath: __dirname,
    frameworks: ['jasmine'],
    exclude: [],

    files: [{
      pattern: 'spec-bundle.js',
      watched: false
    } ],

    preprocessors: {
      'spec-bundle.js': ['coverage', 'webpack', 'sourcemap']
    },

    webpack: require('../webpack.config'),

    coverageReporter: {
      reporters: [
        {
          type: 'json',
          subdir: '.',
          file: 'coverage-final.json'
        },
        {
          type: 'html',
          dir: path.join(__dirname, 'coverage/'),
          subdir: '.'
        }
      ]
    },

    remapIstanbulReporter: {
      src: path.join(__dirname, 'coverage/coverage-final.json'),
      reports: {
        html: path.join(__dirname, 'coverage/remapped/')
      }
      // ,
      // timeoutNotCreated: 1000,
      // timeoutNoMoreFiles: 1000
    },

    webpackServer: { noInfo: true },

    reporters: ['mocha', 'coverage', 'karma-remap-istanbul'],    

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: [
      // 'Chrome',
      'SlimerJS'
    ],
    singleRun: true
  });


  console.log(config);
};

My folder structure is as follows:

Website
|-src
|-test
| |-coverage
| |-unit 
| | |-*.spec.ts
| |-karma.conf.js
| |-spec.bundle.js //as given by aurelia-navigation skeleton
|-webpack.config.js

The problem is that karma-remap-istanbul is dumping the coverage htmls next to the source, instead of outputting everything in test/coverage/remapped/ .

Am I missing any configuration for this?

Answer 1

Try Updating the remapIstanbulReporter attribute as follows.

    remapIstanbulReporter: {
            src: path.join(__dirname, 'coverage/coverage-final.json'),
            reports: {
                html: 'test/coverage/remapped'
            }

    }

The trick is while giving the path if you put './' It takes the relative path wrt to location of the file in folder structure.

Where as when you specify the path as 'folder/folderA/folderB' it takes the absolute path.