CODEWITHSUNDEEP
javascriptkarma-runnerkarma-jasminewebpackbabeljs
gotofritz
gotofritz

Reputation: 3381

Tracing errors using karma + babel + webpack with bundles

Using karma + babel + webpack to run ES6 unit tests. I use a webpack bundle to locate and transpile the ES6. It all works, but whenever there is an error in any test file I get messages with no indication where the error originated, like

Uncaught TypeError: Cannot read property 'querySelector' of null
at /pth/to/test.bundle.js:13256

It's always /pth/to/test.bundle.js:xxxx. Any idea how to make it show more useful messages?

Here's my config

module.exports = function(config) {
  config.set({
    browsers: ["Chrome"],
    files: [
      {
        pattern: "test.bundle.js",
        watched: false
      }],
    frameworks: ["jasmine-jquery", "jasmine-ajax", "jasmine"],
    preprocessors: {,
        "test.bundle.js": ["webpack"]
    },
    reporters: ["dots"],
    singleRun: false,
    webpack: {
        module: {
            loaders: [{
                  test: /\.js/,
                  exclude: /node_modules/,
                  loader: "babel-loader?cacheDirectory&optional[]=runtime"
                }]
        },
        watch: true
    },
    webpackServer: {
        noInfo: true
    }
  });
};

And my test.bundle.js

var context = require.context("./src", true, /.+(-helpers|\.test)\.js$/);
context.keys().forEach(context);

Upvotes: 1

Views: 1656

Answers (1)

Ravinder Singh Rawat
Ravinder Singh Rawat

Reputation: 84

Set devtool to eval in webpack. It works for me. Will give you correct file name with line no. Read more here http://webpack.github.io/docs/configuration.html#devtool

webpack: {
    devtool: 'eval',
    module: {
        loaders: [{
              test: /\.js/,
              exclude: /node_modules/,
              loader: "babel-loader?cacheDirectory&optional[]=runtime"
            }]
    },
    watch: true
},

Upvotes: 5

Related Questions