Running JavaScript tests with Karma in WebStorm

Updated on August, 8th 2016.

With every update of WebStorm we try to add support for modern technologies and tools that help make your development experience even better. In WebStorm 7 we introduced support for Karma – a simple and flexible tool for executing JavaScript tests, developed by the AngularJS team.

Here is some basic info about Karma integration in WebStorm:

  • It uses a local server to run the tests in the selected browsers installed on your computer;
  • It can run tests written with the use of Jasmine, QUnit, or Mocha, or write a simple adapter to use any other framework you like;
  • It works with the istanbul code coverage engine.

Here is a short guide about using Karma in WebStorm. Check out the screencast or read the post to start using Karma.

Initial configuration

To start using Karma, make sure that Node.js is installed on your computer. You can install Karma globally or locally using npm. The recommended approach is to install Karma locally in the project’s directory.

Then you need to add a Karma configuration file to your project. In this configuration file you should specify the testing framework you are going to use, and select browsers for testing.

You can generate it with the following command:
karma init karma.conf.js
or add it manually.


Adding Karma Run/Debug configuration

Now you need to create a new Karma Run/Debug Configuration that will allow you to simply run or debug your tests anytime in WebStorm.

Right-click on the karma.conf.js file in the Project view and select Create “karma.conf.js” option to create a new Run/Debug configuration based on this config file.


Alternatively, you can add Karma configuration from the Edit configurations dialog that can be found in the Run menu. Don’t forget to specify the path to the Karma configuration file.


Running tests

To start running your tests, select this new Run/Debug configuration from the drop-down list on the right of the IDE navigation bar and click on the green Run button. Or hit Alt-Shift-F10 on Windows and Linux or Ctrl-Alt-R on OS X and select the configuration in the Run popup.


WebStorm will run Karma and soon the test results will appear in a nice visual format in the Karma tool window.


You can navigate from the test result to its code, check statistics for the tests execution, and make HTML reports from it.

Rerun tests on changes

Please note that WebStorm disables autoWatch in Karma configuration. You can enable running tests automatically on changes by WebStorm by clicking Toggle auto-test icon on the left side of the Karma tool window: test will be run 10 seconds after your code was changed, if there are no syntax errors.

You can also rerun your tests with the shortcut Alt-Shift-R on Windows and Linux or Ctrl-Cmd-R on OS X.

Run with coverage

WebStorm provides support for the istanbul code coverage engine that is used by Karma. Install node module karma-coverage and add coverage settings in the Karma configuration file, and then simply click the Run with coverage button to get the report of the coverage of your code with tests.

Debugging tests

With WebStorm you can also debug Karma test. Once the Karma Run/Debug configuration is created, put the breakpoints in your code and hit the Debug button next to the drop-down list of configurations to start the debug session. Once the breakpoint is hit, you can step through the code and evaluate expessions.

Your WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Screencast, Tutorials and tagged , . Bookmark the permalink.

48 Responses to Running JavaScript tests with Karma in WebStorm

  1. Brilliant and slick integration. A dream to use for TDD. Thanks!

  2. Jonas says:

    Wow, awesome integration! :-)

    • Tomas says:

      Let’s do that for meteor. In 0.9.4 we should be able to run tests on background and then use similar parser to show the output. Would be great;)

  3. Kees de Kooter says:

    Is it possible to let WS watch file changes and fire the tests on change?

    • Ekaterina Prigara says:

      You can enable Auto-test (it’s on the left in the Test Run window): the tests will be run in 10 seconds after the change is made if there is no syntax errors.

      • Zach says:

        Why does it wait 10 seconds? When I am using Karma’s autowatch directly the feedback is much quicker.

        • Ekaterina Prigara says:

          So far we’ve decided that 10 seconds is the right timeout – not too frequent. We are thinking now about adding an option to configure it.

          • Yngvar Kristiansen says:

            Please do. IMO, it makes the most sense to get immediate feedback from tests as soon as you save your file.

          • BS says:

            +1 for adding a setting (at least).

            10 seconds seems too much for real TDD. I write a test, hit CTRL+S and have to wait 10 seconds to ensure that the test fails. Then I have to wait another 10 seconds after I change the source code to ensure that it passes the tests. It really disrupts and slows down the workflow.

            I don’t hit CTRL+S that super often anyway — only after actually having written that couple of lines that make the test.

            I think that WebStorm’s integration with tests might be the best on the market regardless of that delay, but I’d really appreciate if it was slower. Think of all those guys who try their best to do real TDD!

          • Ekaterina Prigara says:

            As you might now WebStorm automatically takes care of saving your files, you don’t have to press CTRL+S to save them – that’s out vision that we actually follow. That is why in our Karma integration we disable Karma’s autoWatch feature – saving file doesn’t trigger tests to run.
            To Rerun tests there are 2 options:
            1. Use a shortcut Rerun tests: it’s set to ALT+SHIFT+R by default – you can reassign it to CTRL+S if you want
            2. Enable Auto-test option: tests will be rerun after file is changed if there is no syntax errors. In WebStorm 7.0.1 (it will be available in couple of days as an automatic update and is available now as a Release candidate ) you can configure the delay for auto-test.

            We believe that this way we make our integration more advanced since you have more options to rerun tests and you can have them running automatically on change.

  4. Pingback: PhpStorm 7 Web Toolkit Series – npm, Karma, istanbul | JetBrains PhpStorm Blog

  5. George Ivanov says:

    I’m loving the new Karma integration. However, the Karma config created above will have to list *all* test files. During test development, though, I’m only interested in running only a single test spec (not all). Is there any way to do that in WS7?

    The reason for this is i have a test suite that is pretty large, and when developing the current tests, I only want to run the tests in the current test file, not all of the files included in the karma.conf.js.

    • Sergey Simonchik says:

      Alas, Karma doesn’t support running only a single test spec (not all). WS7 can’t improve the situation without fixing it on Karma core side.
      AFAIK, the recommended to run just one spec is to use iit(“should do something”, function(){}); ddescribe(“component”, function(){});

  6. George Ivanov says:

    I’m also having issues making PhantomJS browser work with WS7. My karma.confg.js works just fine with Chrome as a browser. With ‘PhantomJS’ as a browser and adding “karma-phantomjs-launcher’ into the plugins, I do see the the karma server started, however, no tests are run. The “Tests Run” view says “Waiting for browser capturing…” but no tests are executed.

  7. Patrick Podenski says:

    Latest release of WS appears to run tests with no delay when the auto-test is selected. Where can the delay be configured?

  8. Patrick Podenski says:

    Ideally the delay would start to count down when there is no typing activity – right now it runs test every few key strokes which is excessive.

  9. Thor A. Lange says:

    I am using IntelliJ Idea (with a commercial license) an was wondering whether this feature about running Karma tests directly from within the IDE i available in Idea too? Although I am running 12.1.6 it seems that the option is not currently available.

  10. Pingback: Testing with angular, Karma and Webstorm | Bjoern's Blog

  11. Pingback: Thé #15 – Jean Laurent de Morlhon – Les Tests JavaScript avec Karma | Une tasse de thé

  12. Brian says:

    This is great! thanks.

    I was trying to create an debug some javascript. I was trying to bring in a module in my test like this:

    var example = require(‘example’);

    but I get an error saying “Uncaught ReferenceError: require is not defined”. Is there something more I need to configure to do this?

    Thank you.

  13. gcoder says:

    I had to install the cli to get the karma command line in windows

    npm install -g karma-cli

  14. Pingback: Run Karma test suite in Intellij | Thoughts on code

  15. Pingback: AngularJS-Learning | Nisar Khan

  16. xamgreen says:


    do you have an advice for me, what i can try? My Webstorm runs /path/to/karma/karma /path/to/script/intellijServer.js … and some option. Than its writes “Unknown command “/home/max/.WebIde70/config/plugins/js-karma/js_reporter/karma-intellij/lib/intellijServer.js”.” and fails. The file exists i’d checked that. Do you have any Idea what that could be? My Versions are
    Karma: 0.12.23
    PhpStorm 7.1.4, Build #PS-133.1777

    By the way, great article!

    Greez, xamgreen

  17. Pingback: My Present Stack and Preferred Development Environment | The Ultimate Laravel + AngularJS guide

  18. SHUBHOJIT ROY says:

    Integration of Karma in WebStorm is awesome. And, Auto-test does work, but it caches the code, thus the re-run does not run the latest version of code. One needs to stop and restart the Karma server to get fresh code (including specs).
    I did find a workaround (workarounds are always ugly, thus not mentioning) for now, but would expect the IDE to handle this on its own.
    for reference, I’m using WeStorm 2016.1.1

    • Sergey Simonchik says:

      It mostly depends on how karma runs tests. There is a probably similar issue (here test files are compiled to dist/ folder and then karma runs the compiled files). If it’s your case, please upvote, otherwise please provide more details about your environment. Thanks.

    • Tobias Henöckl says:

      Same issue here, could you share your ugly workaround, please? ;-)

      • Chris Deely says:

        The workaround for me was to edit the file below and change ‘refresh’ to ‘true’

  19. antoine says:

    is it possible to run a subset of the unit tests ?

Leave a Reply

Your email address will not be published. Required fields are marked *