PhpStorm 2017.1 Help

Testing JavaScript with Jest

PhpStorm supports testing JavaScript with Jest.

On this page:

Before you start

  1. Make sure the Node.js runtime environment is installed on your computer.
  2. Make sure the NodeJS repository plugin is installed and enabled. The plugin is not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Installing Jest

Open the built-in PhpStorm Terminal (press Alt+F12 or choose View | Tool Windows | Terminal on the main menu) and type npm install --save-dev jest at the command line prompt.
You can also install the jest package on the Node.js and NPM page of the Settings dialog box as described in Node Package Manager (npm). See also Getting Started on the Jest official website.

Quick test launch

You can run and debug Jest tests and suites right from the editor: click run.png or rerun.png in the left gutter and choose Run <test_file_name> or Debug <test_file_name> from the pop-up list.

ws_run_test_from_editor.png
You can also see whether a test has passed or failed right in the editor, thanks to the test status icons ws_icon_test_status.png in the left gutter.

Creating a Jest run/debug 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.

    Click the Add button /help/img/idea/2017.1/new.png on the toolbar and select the Jest configuration type. The Run/Debug Configuration: Jest dialog box opens.

  2. Specify the Node interpreter to use, the location of the jest package, and the working directory of the application. All references in test scripts will be resolved relative to this folder, unless such references use full paths.

    By default, the field shows the project root folder. To change this predefined setting, choose the desired folder from the drop-down list, or type the path manually, or click the Browse button browseButton.png and select the location in the dialog box, that opens.

  3. Optionally specify the jest.config file to use. If the field is empty, PhpStorm looks for a package.json file with a jest key. The search is performed in the file system upwards from the working directory. If no appropriate package.json file is found, then the Jest default configuration is used.

Launching tests via a run/debug configuration

  1. To launch the tests according to a run configuration, select the Jest 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.
    ws_select_run_configuration_jest.png
  2. The test server starts automatically without any steps from your side. View and analyze messages from the test server in the Run tool window.
  3. Monitor test execution in the Test Runner tab of the Run tool window as described in Monitoring and Managing Tests.

See Also

Last modified: 19 July 2017