title: How can I debug a JS Unit Test with Karma & Jasmine in Intellij or Webstorm
body: <p>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?</p>
  
  <p>Here's my Intellij's Run config for executing Karma Tests</p>
  
  <p><a href="https://i.stack.imgur.com/N5WgW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N5WgW.png" alt="Here&#39;s my Intellij&#39;s Karma TEST Run Config"></a></p>
  
  <p>Here's my example unit test</p>
  
  <pre><code>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: '&lt;div class="title"&gt;Hello test&lt;/div&gt;'
  })
  class TestRouterComponent {
  }
  
  let config: Routes = [
      {
          path: '', component: TestRouterComponent
      }
  ];
  
  describe('AppComponent', () =&gt; {
      beforeEach(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [
                  TestRouterComponent,
                  AppComponent,
                  NavbarComponent
              ],
              imports: [ RouterTestingModule, RouterModule ],
              providers: [ provideRoutes(config) ]
          });
      });
  
      it('should have title Hello world', async(() =&gt; {
          TestBed.compileComponents().then(() =&gt; {
              let fixture: ComponentFixture&lt;AppComponent&gt;;
              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');
          });
      }));
  });
  </code></pre>
  
  <p>Here's my karma.conf.js</p>
  
  <pre><code>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;
      }
  }
  </code></pre>