How can I debug a JS Unit Test with Karma & Jasmine in Intellij or Webstorm

Question

I'm trying to debug my JS unit tests written in Jasmine and run by Karma. How can I put a breakpoint in my tests in Intellij when running my tests? And how can I execute a single test?

Here's my Intellij's Run config for executing Karma Tests

Here's my example unit test

import {
    RouterTestingModule
} from '@angular/router/testing';
import {
    async,
    TestBed,
    ComponentFixture
} from '@angular/core/testing';
import { provideRoutes, Routes, RouterModule } from '@angular/router';
import { Component } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';

@Component({
    selector: 'as-test-cmp',
    template: '<div class="title">Hello test</div>'
})
class TestRouterComponent {
}

let config: Routes = [
    {
        path: '', component: TestRouterComponent
    }
];

describe('AppComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                TestRouterComponent,
                AppComponent,
                NavbarComponent
            ],
            imports: [ RouterTestingModule, RouterModule ],
            providers: [ provideRoutes(config) ]
        });
    });

    it('should have title Hello world', async(() => {
        TestBed.compileComponents().then(() => {
            let fixture: ComponentFixture<AppComponent>;
            fixture = TestBed.createComponent(AppComponent);
            fixture.detectChanges();

            let compiled = fixture.debugElement.nativeElement;
            expect(compiled).toBeDefined();
            // TODO: find a way to compile the routed component
            // expect(compiled.querySelector('div.title')).toMatch('Hello world');
        });
    }));
});

Here's my karma.conf.js

module.exports = function (config) {
    var gulpConfig = require('../gulp/config')();

    /**
     * List of npm packages that imported via `import` syntax
     */
    var dependencies = [
        '@angular',
        'lodash',
        'rxjs',
        'moment'
    ];

    var configuration = {
        basePath: '../../',

        frameworks: ['jasmine'],
        browsers: ['PhantomJS'],
        reporters: ['progress', 'coverage'],

        preprocessors: {},

        // Generate json used for remap-istanbul
        coverageReporter: {
            dir: 'report/',
            reporters: [
                {type: 'json', subdir: 'report-json'}
            ]
        },

        files: [
            'node_modules/core-js/client/shim.min.js',
            'node_modules/zone.js/dist/zone.js',
            'node_modules/zone.js/dist/long-stack-trace-zone.js',
            'node_modules/zone.js/dist/proxy.js',
            'node_modules/zone.js/dist/sync-test.js',
            'node_modules/zone.js/dist/jasmine-patch.js',
            'node_modules/zone.js/dist/async-test.js',
            'node_modules/zone.js/dist/fake-async-test.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/moment/moment.js'
        ],

        // proxied base paths
        proxies: {
            // required for component assests fetched by Angular's compiler
            "/src/": "/base/src/",
            "/app/": "/base/src/app/",
            "/node_modules/": "/base/node_modules/"
        },

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true
    };

    configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
    configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
    configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];

    var files = [
        gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
        gulpConfig.src + 'systemjs.conf.js',
        'config/test/karma-test-shim.js',
        createFilePattern(gulpConfig.tmpApp + '**/*.js', {included: false}),
        createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.html', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.css', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.ts', {included: false, watched: false}),
        createFilePattern(gulpConfig.tmpApp + '**/*.js.map', {included: false, watched: false})
    ];

    configuration.files = configuration.files.concat(files);

    dependencies.forEach(function (key) {
        configuration.files.push({
            pattern: 'node_modules/' + key + '/**/*.js',
            included: false,
            watched: false
        });
    });

    if (process.env.APPVEYOR) {
        configuration.browsers = ['IE'];
        configuration.singleRun = true;
        configuration.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough
    }

    config.set(configuration);

    // Helpers
    function createFilePattern(path, config) {
        config.pattern = path;
        return config;
    }
}
module.exports = function (config) {
    var gulpConfig = require('../gulp/config')();

    /**
     * List of npm packages that imported via `import` syntax
     */
    var dependencies = [
        '@angular',
        'lodash',
        'rxjs',
        'moment'
    ];

    var configuration = {
        basePath: '../../',

        frameworks: ['jasmine'],
        browsers: ['PhantomJS'],
        reporters: ['progress', 'coverage'],

        preprocessors: {},

        // Generate json used for remap-istanbul
        coverageReporter: {
            dir: 'report/',
            reporters: [
                {type: 'json', subdir: 'report-json'}
            ]
        },

        files: [
            'node_modules/core-js/client/shim.min.js',
            'node_modules/zone.js/dist/zone.js',
            'node_modules/zone.js/dist/long-stack-trace-zone.js',
            'node_modules/zone.js/dist/proxy.js',
            'node_modules/zone.js/dist/sync-test.js',
            'node_modules/zone.js/dist/jasmine-patch.js',
            'node_modules/zone.js/dist/async-test.js',
            'node_modules/zone.js/dist/fake-async-test.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/moment/moment.js'
        ],

        // proxied base paths
        proxies: {
            // required for component assests fetched by Angular's compiler
            "/src/": "/base/src/",
            "/app/": "/base/src/app/",
            "/node_modules/": "/base/node_modules/"
        },

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true
    };

    configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
    configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
    configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];

    var files = [
        gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
        gulpConfig.src + 'systemjs.conf.js',
        'config/test/karma-test-shim.js',
        createFilePattern(gulpConfig.tmpApp + '**/*.js', {included: false}),
        createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.html', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.css', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.ts', {included: false, watched: false}),
        createFilePattern(gulpConfig.tmpApp + '**/*.js.map', {included: false, watched: false})
    ];

    configuration.files = configuration.files.concat(files);

    dependencies.forEach(function (key) {
        configuration.files.push({
            pattern: 'node_modules/' + key + '/**/*.js',
            included: false,
            watched: false
        });
    });

    if (process.env.APPVEYOR) {
        configuration.browsers = ['IE'];
        configuration.singleRun = true;
        configuration.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough
    }

    config.set(configuration);

    // Helpers
    function createFilePattern(path, config) {
        config.pattern = path;
        return config;
    }
}

Answer 1

The above answer is right, but before that you have to install chrome extension Jetbrains IDE support plugin, and then you can debug in your WebStorm.

Answer 2

You can debug on your browser. Just click on the DEBUG button, find your class and add a breakpoint wherever you want. To run it again, just refresh the page.