Skip to end of metadata
Go to start of metadata

 

With unit testing, we can verify parts of our source code are working as expected. Especially when changing code or doing refactoring, unit tests prove valuable: they can tell us if the changes we did break existing functionality or not. Let's have a look at JavaScript Unit Testing in PhpStorm.

Icon

PhpStorm also supports unit testing PHP code using PHPUnit as well as BDD testing with Behat.

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.

Icon

Note that only one of both is required. Depending on our preference, we can either install the JSTestDriver test runner or the Karma test runner.

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.

Icon

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.

Icon

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.

Icon

For the Karma test runner, make sure the karma-coverage Node.js (npm) package is installed to be able to run tests with code coverage enabled.

  • No labels