Running JavaScript tests with Karma in WebStorm 7

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.

Now you can choose either to use JSTestDriver to run your test in WebStorm (learn about the JSTestDriver plugin), or to try Karma.

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. You can also look through our tutorial Running JavaScript tests with Karma.


To start using Karma, make sure that Node.js is installed on your computer. You can install Karma globally or locally in your project directory with WebStorm’ built-in npm (click Node.js Setting in the toolbar to search and install karma module). The recommended approach is to install Karma locally in the project’s directory.

Configure Karma for your project by adding or generating a Karma configuration file. In this configuration file you should specify the testing framework you are going to use, and select browsers for testing.

Next, you create a Karma Run Configuration that will allow you to simply run your tests anytime in WebStorm in one click.

Test results are presented in a nice visual format in the Run panel for Karma. You can navigate from the test result to its code, check statistics for the tests execution, and make HTML reports from it.

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

To learn about Karma integration in WebStorm, please check the Running JavaScript tests with Karma tutorial in WebStorm’s tutorial space.

Develop with pleasure!
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.

37 Responses to Running JavaScript tests with Karma in WebStorm 7

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

  2. Jonas says:

    Wow, awesome integration! :-)

  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:

            Hello,
            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.
    Brian

  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:

    Hey,

    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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">