ReSharper Help

Unit Testing in JavaScript

ReSharper supports two JavaScript testing frameworks: QUnit and Jasmine, allowing you to run and analyze tests right from Visual Studio.

Prerequisites

To use QUnit, you should reference qunit.js and qunit.css files. For more information, see QUnit website.
To use Jasmine, you should reference jasmine.js and jasmine.css files. For more information, see Jasmine website.

Nested references are supported, so you do not have to reference framework files directly from your files with tests.

Example of a JavaScript unit test

Consider the example below. The isEmail function checks whether a recently entered e-mail address is correct.

ReSharper_by_Language__JavaScript__Unit_Testing_01
What if this function doesn't work properly? To find it out, you can use QUnit or Jasmine and write a test.

In the example below, test and ok functions from QUnit are used. The first argument of the test function defines the name of the test. In our case it coincides with the name of the tested function. The second argument contains the code to run and calls of the ok function. So the test function checks whether correct e-mail address is treated as correct and whether incorrect e-mail address is treated as incorrect.

You can write the same test using describe, expect and it functions from Jasmine.

ReSharper detects tests automatically. Click the gutter icon, then clickRun.

ReSharper_by_Language__JavaScript__Unit_Testing_02
The test is run in a single session in the Unit Test Sessions window. As you can see the test has passed, so the function works properly.
ReSharper_by_Language__JavaScript__Unit_Testing_03

Configuring JavaScript unit testing preferences

By default, when the tests are started, ReSharper launches the web browser specified in the Tools | Unit Testing | JavaScript Tests options page. It runs the tests and reports the information back to ReSharper. Optionally, on this settings page you can change the default browser or opt to run tests with PhantomJS library without launching a browser.

ReSharper_by_Language__JavaScript__Unit_Testing_04

If necessary, you can specify a custom HTML harness for your tests. The harness is compatible with the Chutzpah test runner and can use the special Chutzpah placeholders.

To use a custom HTML harness, tick the corresponding check box in the Tools | Unit Testing | JavaScript Tests options page.

To use a custom HTML harness

  1. Tick the Enable custom HTML harness check box in the Tools | Unit Testing | JavaScript Tests options page.
  2. If you do not have a harness file, you can create an empty HTML file, click the Copy default implementation to clipboard and paste the default harness template into the file.
  3. Type a filename or path for the harness file.
  4. Using the Test harness location selector, specify how the filename or path should be treated by the test runner.
  5. Click Save to apply the modifications and let ReSharper choose where to save them, or save the modifications to a specific settings layer using the Save To drop-down list. For more information, see Managing and Sharing ReSharper Settings.

See Also

Last modified: 30 June 2015