Features PhpStorm Tutorials WebStorm

JavaScript unit testing support

If you’re a JavaScript developer, you probably know that the quality and correctness of your application are crucial. Well, consistency and regression testing just got a little less painful. Meet JsTestDriver plugin – an open-source project that was originally started at Google and is now contributed to by the JetBrains team.

WebStorm 3.0 bundles it.

Users of other JetBrains IDE – PhpStorm, IntelliJ IDEA, PyCharm, RubyMine, and AppCode – can install it from the plugin repository following these instructions.

It allows you to enjoy all the benefits of JsTestDriver right from the comfort of your IDE. This includes the following features:

  • starting and stopping the server;
  • running and rerunning tests;
  • filtering and viewing test results, navigation from results to source code;
  • jumping from JavaScript exception stacktrace to source code;
  • support for JsTestDriver configuration file: syntax and error highlighting, basic completion, navigation to referenced files;
  • capturing messages sent to console.log();
  • support for Jasmine, QUnit and JsTestDriver built-in assertion frameworks:
    • quick-fixes for enabling global symbol reference resolving for each assertion framework (if you have QUnit or Jasmine tests in a project, you will be prompted to install the corresponding adapter);
    • contextual code generation actions (Alt+Insert) for creating new tests, setup and teardown methods for each assertion framework;
    • declarative HTML injection support for JsTestDriver built-in assertion framework.

The best way to understand how this works is to see it in action.

Getting started

If you aren’t aware of JsTestDriver concepts, consider visiting http://code.google.com/p/js-test-driver/wiki/GettingStarted. There is also an excellent tutorial introduction to JavaScript unit testing by Christian Johansen.

Setup project

We have created a sample project for you. Please download greeter-sample.zip, extract it and open the project in your IDE.

If you open GreeterTest.js for the first time, you will see error highlighting on the TestCase method call expression. Position the caret on the error-highlighted code, press Alt+Enter/Option+Enter and choose “Add JsTestDriver assertion framework support” from the list of available intention actions.

A global JavaScript library named “JsTestDriver Assertion Framework” will be created and associated with a project. To view it, open the Settings dialog (File | Settings or IntelliJ IDEA | Preferences) and select JavaScript Libraries.

Before you can run any of your tests you need to start the test server and capture at least one slave browser. The server does not have to reside on the machine where the test runner is, and the browsers themselves can be on different machines as well.

Starting JsTestDriver server locally

To launch the JsTestDriver server, look for the tool window at the bottom of the screen.

Click the green arrow to the right of the address bar to start the server. The status bar turns yellow to let you know the server is running, but has no slave browsers.

Then, copy the capture URL and paste it in a browser. The status bar turns green, and the corresponding browser icon lights up. Now you’re ready to run tests.

Running tests

To run tests, right-click greeter.jstd and choose Run “greeter.jstd”. Tests will be run against the local JsTestDriver server.

In our case we have one failed test ‘GreeterTest.test greet null’. You can easily navigate from the stack trace to the source code that causes problems. You can also navigate from the test results tree to the test case/test function declaration using the F4 key.

Generate code

In order to remove duplicated code that sets the greeter local variable, you can refactor the Greeter object creation to a special method called setUp, which is called before each test function is executed. Just invoke the Generate action by pressing Alt+Insert inside of a TestCase method call expression, and then choose “JsTestDriver Setup”.

Use the Shift+F10 keyboard shortcut to re-run the tests after changing code.

Test with pleasure!

Download WebStorm for your platform from project EAP page.

Note: Users of PhpStorm, as well as other JetBrains IDE – IntelliJ IDEA, PyCharm, RubyMine, and AppCode – should install it from the plugin repository following these instructions.

Comments below can no longer be edited.

13 Responses to JavaScript unit testing support

  1. Avatar

    Eric says:

    October 18, 2011

    This is a great addition for JS Developers, thanks for the pointer.

    Speaking of pointers, though: I get a NullPointerException when I try to run tests with Safari, latest WebKit nightly or Opera under OS X. Works fine with Firefox (tried 7 & 6) and Chrome, and VMs with Internet Explorer (tried XP with IE 8 and XP with IE 7) using Charles on the guest as a proxy server.

    • Avatar

      Eric says:

      October 18, 2011

      Some more info: actually both Safari and Opera work every other time (starting with a failure); I get the same behavior using them on a windows guest.

      (Besides: in my first comment, I meant to write “[…] using Charles on the *host* as a proxy server.”)

    • Avatar

      Sergey Simonchik says:

      October 18, 2011

      Eric, thanks for the feedback.
      Please file an issue http://youtrack.jetbrains.net/issues/WI#newissue=yes (select “Plugin: JsTestDriver” subsystem when creating an issue).

  2. Avatar

    russellrong says:

    October 20, 2011

    this is great!

  3. Avatar

    Alex Zeitler says:

    October 20, 2011

    Great news, thanks!

  4. Avatar

    Thomas says:

    January 19, 2012


    great work, thx.

    Could you also post an example with a QUnit test.
    The required adapter comes within the JsTestDriver Framework in IntelliJ/PhpStorm imho (It’s there as an external library next to the JsTestDriver Franwork), but i can’t get it to run with a QUnit test:
    It means “Empty test suite.”, but I have some tests in it already.

    Please help me – thanks.

  5. Avatar

    stlum9495 says:

    February 11, 2012

    New Feature request for debugging JSTestDriver within IDE! This would make JetBrains better than anyone on market right now…


  6. Avatar

    Eric says:

    February 13, 2012

    Is there any kind of support for testing CoffeeScript (without having to compile to JavaScript manually, first)?

    • Avatar

      Sergey Simonchik says:

      February 13, 2012

      No, there isn’t.
      Which tool do you use (or intend to use) for unit-testing CoffeeScript?

      • Avatar

        Eric says:

        February 13, 2012

        I’m looking for something now. I think I will use jsTestDriver against the generated js files. Is there a way to tell WebStorm to automatically compile CoffeeScript files into js files when saved? That would help. Thanks!

  7. Avatar

    Francis Potter says:

    February 28, 2012

    I keep wanting to like JetBrains IDEs!

    Running unit tests is the most important reason to use an IDE, in my book.

    Have a big Javascript project coming up, so I installed the latest release version of WebStorm, found this page and tried it.

    Doesn’t work in Safari. Doesn’t work in Chrome. Doesn’t work in FireFox. NullPointerExceptions in every case.

    I won’t be purchasing WebStorm.

    • Avatar

      Sergey Simonchik says:

      February 28, 2012

      Hi Francis,

      please file an issue in the http://youtrack.jetbrains.net/issues/WI#newissue=yes (select “Plugin: JsTestDriver” subsystem when creating an issue).
      Please also attach to the description: exception stacktrace, plugin version, your OS version, java version, IDE version.

Discover more