Prerequisites
PhpStorm supports tests written using the JsTestDriver Assertion framework, Jasmine and QUnit. Before we can run our JavaScript unit tests in PhpStorm, we'll have to make sure a test runner is installed, either JsTestDriver or Karma. Note that PhpStorm also supports Cucumber and Mocha tests.
Let's see how we can install the required test runners.
Installing JsTestDriver plugin
The JsTestDriver plugin must be installed in PhpStorm. This can be done from the IDE Settings | Plugins, then clicking Install JetBrains plugin... and searching for JsTestDriver.
After installing the plugin (using the Install plugin button or the context menu) we will have to restart the IDE in order to enable it. We'll also have to enable the testing framework we want to use. For JsTestDriver, we can start writing a simple test using the framework of choice and then use the Add <test framework> intention (Alt+Enter).
Installing Karma plugin
The Karma plugin must be installed in PhpStorm. This can be done from the IDE Settings | Plugins, then clicking Install JetBrains plugin... and searching for Karma. Note that for this plugin to work, the Node.js plugin must be installed as well.
After installing the plugin (using the Install plugin button or the context menu) we will have to restart the IDE in order to enable it. We'll also have to enable the testing framework we want to use. The easiest way to install either Jasmine, QUnit or Mocha is by using the Node.js Package Manager.
From the Project Settings | Node.js and NPM, click the green + button to search for either karma-jasmine, _ karma-qunit_ or karma_mocha. From the search dialog, we can Install Package to download the package and add it to our project.
1. Adding a Unit Test to a Project
JavaScript unit tests can be created in our project, for example under a folder named tests. In there, we can add .js files in which we can write our tests. Here's an example using the JsTestDriver testing framework:
And here's one using Jasmine:
2. Creating a Run Configuration
No matter which test runner we use, we'll have to create a Run/Debug Configuration to be able to run our tests. This can be done from the toolbar or by using the Run | Edit Configurations... menu. From there, we can add a new JsTestDriver configuration or a new Karma configuration.
Creating a JsTestDriver Run Configuration
For the JsTestDriver test runner, we have to specify which tests we want to run: individual tests or an entire directory. We also have to specify the JsTestDriver test configuration file to be used. In the other tabs, we can select how we want to run the test server, configure debugging and code coverage.
The JsTestDriver plugin makes running individual test files easier. Instead of creating the Run/Debug Configuration manually, we can use the Create '<test name'> configuration context menu to create a run configuration for us, or the Run '<test name>' context menu to create the run configuration and immediately run tests.
Creating a Karma Run Configuration
The Karma test runner requires the test configuration file (which we can create by running karma init in PhpStorm's terminal window). We can also pick which browser to start for running the tests.
3. Running Unit Tests
Let's run our tests! After creating a Run configuration, we can use the toolbar buttons to start it or press Shift+F10. Both the JsTestDriver and the Karma test runners will launch a test server, start our browser, and run our tests in there. We can open multiple browsers to run tests in and get results from all of them. The results are displayed in the tests tool window.
We can see a log of all test run as well as look at test statistics and drill down to individual tests. Using the Jump to Source context menu or pressing F4, we can navigate to the test source code as well.
From the test tool window toolbar, we can enable "auto-test". When active, PhpStorm will automatically re-run JavaScript unit tests whenever we make code changes without having to start them manually.
4. Code Coverage
How can we be sure we've tested all execution paths in our code? We can run unit tests with code coverage (from the context menu or toolbar). Doing this displays a new tool window which provides us with statistics on the percentage of statements executed during the test run.
We can drill down and jump to source and see which statements have been tested or which are untested. The colors on the left in the editor show us if a statement was executed or not. In our example, we have no test for the wassup function. We can implement this in order to increase code coverage.