Karma + Webpack + sourcemap preprocessor doesn't stop at breakpoints in WebStorm

Question

I'm starting a project the NG6-Kit-starter.

I'm using WebStorm.

I want to be able to debug my unit tests using WebStorm, so I followed this tutorial.

I can run unit test from WebStorm but I can't put breakpoints, it never stops at breakpoints and I have don't know why.

I suspect it has to do something with the fact that I'm using a preprocessor in my karma config file.

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

See below my full karma.config.js

module.exports = function (config) {
  config.set({
    // base path used to resolve all patterns
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],

    // list of files/patterns to load in the browser
    files: [{ pattern: 'spec.bundle.js', watched: false }],

    // files to exclude
    exclude: [],

    plugins: [
      require("karma-sinon-chai"),
      require("karma-chrome-launcher"),
      require("karma-mocha"),
      require("karma-mocha-reporter"),
      require("karma-sourcemap-loader"),
      require("karma-webpack")
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },

    webpack: {
      //devtool: 'inline-source-map',
      devtool: 'source-map',
      module: {
        loaders: [
          { test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
          { test: /\.html$/, loader: 'raw' },
          { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
          { test: /\.css$/, loader: 'style!css' },
          { test: /\.svg/, loader: 'svg-url-loader' },
          { test: /\.json$/, loader: 'json-loader' }
        ]
      }
    },

    webpackServer: {
      noInfo: true // prevent console spamming when running in Karma!
    },

    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha'],

    // web server port
    port: 9876,

    // enable colors in the output
    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_DEBUG,

    // toggle whether to watch files and rerun tests upon incurring changes
    autoWatch: false,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // if true, Karma runs tests once and exits
    singleRun: true
  });
};

And my spec.bundle.js file:

import angular from 'angular';

import mocks from 'angular-mocks';

let context = require.context('./client/app', true, /\.spec\.js/);
context.keys().forEach(context);

Does anyone know how to make this work with WebStorm in order to be able to put breakpoints in unit tests ?

Answer 1

Thanks for your reply, it helped me find what I was doing wrong. So I tested like you did and it is working exactly as you say (you have to refresh on Webstorm 2016 and it's working out of the box with the EAP version).

SO I went commit by commit (I did 4 commit) to find out what I was doing wrong: I'm new with webpack and when I was experimenting some stuff I tried changing this setting in karma.conf.js:

Replacing:

webpack: {
    devtool: 'inline-source-map',

By:

webpack: {
    devtool: 'source-map',

Changing it back solved my issue. The unit tests now stops at breakpoints

I did a bit of research to understand better what this setting is, have a look at this question if you're interested: Why inline source maps?

Answer 2

Just tried 2017.1 EAP - karma debugging works out of the box:

• right-click karma.config.js
• debug - breakpoints in client/app/common/hero/hero.spec.js are hit.

In 2016.3.2 I have to refresh the browser page (the one that has JetBrains IDE Extension enabled) to get breakpoints hit.