IntelliJ IDEA 2017.1 Help

Testing JavaScript with JSTestDriver

This feature is supported in the Ultimate edition only.

On this page:

Introduction

JavaScript unit tests are run in a browser against a test server which actually handles the testing process.

This server allows you to capture a browser to run tests in, loads the test targets to the captured browser, controls the testing process, and exchanges data between the browser and IntelliJ IDEA, so you can view test results without leaving the IDE.

The test server does not necessarily have to be on your machine, it can be launched right from IntelliJ IDEA through the JSTestDriver test runner.

The test server loads tests to the browser according to the configuration files that define which test and corresponding production files should be loaded and in which order. JSTestDriver server treats *.jstd and *.conf files as test runner configuration files. Create one or several configuration files in advance manually and then specify them in the run configuration.

Configuring the JSTestDriver test runner

You do not need to download the JSTestDriver framework manually. The server and the assertion framework are provided through the JSTestDriver plugin. The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

This plugin does the following:

  • Runs the JSTestDriver server that captures an opened browser to execute tests in.
  • During the test creation, detects the unit testing framework the test code complies with, whereupon suggests the Add <test framework> support intention action, provided that the framework is recognized as a IntelliJ IDEA JavaScript library and is thus available in the IDE.

Configuring a testing framework in a project

  1. Download the framework of your choice and configure it as a IntelliJ IDEA JavaScript library.
  2. Do one of the following:
    • Add the project folder to the library scope.
    • Enable the framework support on-the-fly during test creation. Write the test as required, position the cursor at it, and press Alt+Enter. Then choose the Add <test framework> support intention action from the list.
    • To use Jasmine, add jasmine-jstd-adapter to the configuration file.

      Open jsTestDriver.conf and type the following code in it:

      load: lib/jasmine/jasmine.js lib/jasmine-jstd-adapter/JasmineAdapter.js

Creating a test runner configuration file manually

A test runner configuration file defines which test and corresponding production files should be loaded and in which order. Any file with the extension *.jstd or *.conf is treated as a test runner configuration file.

  1. In the Project tree, select the parent folder of the src (production) and the test folders, and choose New | File on the context menu.
  2. In the New File dialog box, that opens, type a name of the configuration file with the extension jstd or conf.
  3. Open the new file in the editor and specify the full path to the current folder and paths to the files to load relative to the current folder. Use wildcards to specify file name patterns. The required format is YAML, for more details, see description of test runner configuration files.

Starting the IntelliJ IDEA default JSTestDriver test server

If you are going to use a test server running on another machine or listening to another port, start it according to the server-specific instructions and specify its URL address in the Server ares of the Run/Debug Configuration: JSTestDriver dialog box.

  1. Make sure the JSTestDriver plugin is enabled and at least one test runner configuration file is available in the project.
  2. Open the JSTestDriver Server tool window by doing one of the following:
    • On the main menu, choose View | Tool Windows | JSTestDriver Server.
    • Click the Run button /help/img/idea/2017.1/run.png on the toolbar, and then click the Start a local server link in the pop-up window that opens.
  3. In the JSTestDriver Server tool window, that opens, click the Run a local server toolbar buttonrun.png.

To stop the server when you are through with unit testing, click the Stop the local server toolbar button/help/img/idea/2017.1/stop.gif.

Capturing a browser to execute tests in

  1. Start the JSTestDriver Server if it is not running yet, and then switch to the JSTestDriver Server tool window.
  2. To start a local browser with the Remote Console of the JSTestDriver, do one of the following:
    • Click the icon that indicates the browser of your choice.
    • If the browser is already opened, copy the contents of the Capture a browser using the URL read-only field and paste the URL in the address bar.

    In either case, the icon that indicates the chosen browser becomes active.

    You can have several browsers captured. However if you are going to debug your unit tests, you will have to appoint a browser for debugging in the Debug tab of the Run/Debug Configuration: JSTestDriver dialog box.

  3. Switch to the JSTestDriver Server tool window and click the icon that indicates the browser you just opened. IntelliJ IDEA displays a message informing you that it is ready for executing tests.

Creating a JSTestDriver run configuration

  1. Open the Run/Debug Configuration dialog box by doing one of the following:
    • On the main menu, choose Run | Edit Configurations.
    • Open the test file in the editor, and then choose Create <file name> on the context menu.
    • Select the test file in the Project tool window, and then choose Create <file name> on the context menu of the selection.
  2. Click the Add button /help/img/idea/2017.1/new.png on the toolbar and select the JSTestDriver configuration type.
  3. In the dialog box that opens, specify the test scope, configuration parameters, and activities to perform before test execution.
  4. Apply the changes and close the dialog box.

Launching unit tests

  1. To launch the tests according to a run configuration, select the JSTestDriver run/debug configuration from the list on the main toolbar and click the Run button /help/img/idea/2017.1/run.png to the right of the list.
  2. To launch a single test, open the test file in the editor and click the blue arrow icon /help/img/idea/2017.1/arrow_right.png in the gutter area next to the text to run.
  3. Monitor test execution in the Test Runner tab of the Run tool window as described in Monitoring and Managing Tests.

Monitoring code coverage

With JSTestDriver, you can also monitor how much of your code is covered with tests. IntelliJ IDEA displays this statistics in a dedicated tool window and marks covered and uncovered lines visually right in the editor. To monitor code coverage, you need to slightly update the run/debug configuration and then launch the tests in the special Run with Coverage mode.

  1. Create a JSTestDriver run/debug configuration as described above.
  2. To have specific files excluded from coverage analysis, specify the paths to them in the Coverage tab of the Run/Debug Configuration: JSTestDriver dialog box.
  3. Start the JSTestDriver server and capture a browser to run the tests in.
  4. On the main toolbar, select the JSTestDriver run configuration in the Run/Debug Configurations drop-down list and click the Run with Coverage button /help/img/idea/2017.1/runWithCoverage.png.
  5. Monitor the code coverage in the Coverage tool window.

See Also

Last modified: 5 April 2017