Multiple HTML Reporters Karma Test Runner

Question

I am using Karma Test runner with Jasmine framework. I am trying to use the following reporters. But I can't use both together, can someone help me with this?

(Karma-html-reporter) https://www.npmjs.com/package/karma-html-reporter
(Karma-jasmine-html-reporter) https://www.npmjs.com/package/karma-jasmine-html-reporter

Karma-html-reporter helps to generate HTML report of the test cases, while karma-jasmine prettifies the test cases in browser.

I think the problem lies in some naming, as for both of these,

reporters: ["html"]

is used... Can someone suggest some way to make both of them work.

Here is my Karma.conf.js

module.exports = function (config) {

  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    "basePath": ".",

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    "frameworks": ["jasmine", "sinon"],

    // list of files / patterns to load in the browser
    "files": ["dest/assets/test/myfile.debug.js", "test/**/help*.js",
              "test/**/test*.js"],

    // list of files to exclude
    "exclude": [],

    // Reporters to use
    "reporters": ["nyan", "html"],

    // Configurations for Coverage Reporter
    "coverageReporter": {
      "dir": "coverage/",
      "reporters": [
        {"type": "html", "subdir": "CoverageReportHTML"},
        {"type": "text", "subdir": ".", "file": "coverage.txt"}
      ]
    },

    // Configurations for HTML Reporter
    "htmlReporter": {
      "outputDir": "karma_html", // where to put the reports
      "templatePath": null, // set if you moved jasmine_template.html
      "focusOnFailures": true, // reports show failures on start
      "namedFiles": false, // name files instead of creating sub-directories
      "pageTitle": null, // page title for reports; browser info by default
      "urlFriendlyName": false, // simply replaces spaces with _ for files/dirs
      "reportName": "report-summary" // report summary filename; browser info by default
    },

    // Karma Webserver port
    "port": 9999,

    // enable / disable colors in the output (reporters and logs)
    "colors": true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    "logLevel": config.LOG_ERROR,

    // enable / disable watching file and executing tests whenever any file changes
    "autoWatch": true,

    // Custom Launchers / Browsers Configurations
    "customLaunchers": {
      "IE10": {"base": "IE", "x-ua-compatible": "IE=EmulateIE10"},
      "IE9": {"base": "IE", "x-ua-compatible": "IE=EmulateIE9"},
      "IE8": {"base": "IE", "x-ua-compatible": "IE=EmulateIE8"},
      "IE7": {"base": "IE", "x-ua-compatible": "IE=EmulateIE7"}
    },

    // Browsers to Launch - Available launchers: https://npmjs.org/browse/keyword/karma-launcher
    "browsers": ["Chrome", "Firefox"],
    // browsers: ["Chrome", "Safari", "IE", "Firefox", "IE8","IE9", "IE10"],
    // if true, Karma captures browsers, runs the tests and exits (Keep false for CI)
    "singleRun": true
  });
};

Healforgreen Healforgreen · Accepted Answer · 2016-01-08T20:17:26

TLDR: I submitted a pull request, but am not sure when it will get looked at. For now, uninstall your current version of karma-jasmine-html-reporter and run npm install Nocomm/karma-jasmine-html-reporter --save-dev.

Use as such: reporters: ['kjhtml', 'html']

---------------------------------------

You sure can, I am going to submit a pull request so that the two don't clash. For now you can edit the last line of the karma-jasmine-html-reporter\src\index.js file.

module.exports = {
  'reporter:kjhtml': ['type', initReporter]
};

Just change 'reporter:html' to 'reporter:kjhtml', and then reflect that where you define your reporters in your karma configuration file. Both of them should now work side-by-side.

Multiple HTML Reporters Karma Test Runner

1 Answers