karma-stacktrace

What

Karma framework to provide human-readable mapped stacktraces for failed tests to make debugging easier in your browser.

Motivation

Test frameworks like QUnit and Jasmine use non-standard stack property of Error object to output a stacktrace for failed unit tests. Modern browsers do not apply sourcemaps to Error.prototype.stack and unmapped stacktrace looks useless.

An example of an unmapped stacktrace:

The framework catches failed tests and reports mapped stacktrace by using stacktrace-js library:

Install

Install with yarn:

yarn add karma-stacktrace

With npm:

npm install karma-stacktrace

Karma configuration

Add stacktrace to the list of frameworks in your karma configuration:

// karma.conf.js
module.exports = function (config) {
  config.set({
    //...
    frameworks: ['stacktrace']
    //...
  });
};

To avoid blocking the main execution thread web worker is used by default for parsing/mapping stacktrace, however you can disable it by setting useWorker option to false:

// karma.conf.js
module.exports = function (config) {
  config.set({
    //...
    client: {
      stacktrace: {
        useWorker: false
      }
    }
    //...
  });
};

If you use inline sourcemaps (devtool: 'inline-source-map') you need to disable the web worker.

Limitations/Gotchas

• The framework supports Jasmine and QUnit testing frameworks.
• The framework does not affect stacktrace in original messages, it attaches isolated reporters to trace mapped stacktrace.
• Set useWorker option to false value for inline sourcemaps to get mapped stacktrace.

Examples

See the karma configuration example used with webpack 5 configured to emit external sourcemaps (devtool: 'source-map').

Inspired by

• sourcemapped-stacktrace