Early Access Program

WebStorm 2017.3 EAP, 173.2941: watch mode with Jest and Mocha

Please welcome the new EAP build of WebStorm 2017.3 (173.2941.6).

To get it, update via Toolbox App, or download it here and install side by side with your stable WebStorm version.

Download WebStorm 2017.3 EAP

You can learn more about the new features added earlier in the WebStorm 2017.3 EAP builds in these blog posts.

Improved integration with Jest

Good news for everyone who is using Jest for testing! We’ve been working on improving integration with Jest in WebStorm, and now it works seamlessly with Jest’s watch mode. That means that you will now get super-fast test results from Jest on changes in the WebStorm test tool window.

All you have to do is to add --watch flag to the options field in the Jest run configuration in WebStorm. If you want to always start tests (including single tests you can run from the editor) in the watch more, add --watch to the default Jest configuration (for that open the Edit configurations… dialog, select and edit Jest under the Defaults list on the left).


In addition to that, WebStorm can now work with Jest configuration files written in JavaScript.

And Mocha

In the same way, WebStorm now allows you to add --watch option to the Mocha run configuration to run it using Mocha’s own watch mode.

Notable Changes

  • Better performance when using Flow with enabled navigation.
  • JavaScript debugger doesn’t require JetBrains IDE Support extension now for all new debug configurations. More details on that are coming in the next blog post. Please note that if you’re using Live Edit, you will still need the browser extension.
  • Support for tagged template literals language injection. This can be useful if you’re working with some CSS-in-JS libraries like CSJS. You can learn how to configure it in this comment.
  • Better support for import() syntax in JavaScript and TypeScript
  • React className is now autocompleted without {} or “”. Type an opening brace or quote, depending on what you need in this particular case, and the closing one will be added automatically.

You can find a list of addressed issues in the Release notes.

Please share your feedback and report issues on our tracker. Thank you!

WebStorm Team

Comments below can no longer be edited.

9 Responses to WebStorm 2017.3 EAP, 173.2941: watch mode with Jest and Mocha

  1. Avatar

    Derbeerka says:

    October 4, 2017

    Thanks for Mocha’s watch mode!

  2. Avatar

    Sean Lynch says:

    October 5, 2017

    Still just waiting for IDEA-63201. I look forward to seeing one of these blog posts about thaT.

  3. Avatar

    Rommel Manalo says:

    December 8, 2017

    When i turn the mocha watch mode, the editor became shitty. The auto-complete always hide immidiately and there is message of “indexing” always on my status bar. I hampers my productivity. Please fix this shit

    • Ekaterina Prigara

      Ekaterina Prigara says:

      December 11, 2017

      We would appreciate if you provide a more detailed information about the problem, starting with the WebStorm and Mocha versions you’re using. Thank you!

  4. Avatar

    Ellis says:

    January 28, 2018

    The latest version of webstorm 2017.3.3 is using {} for react className by default. This was not fixed.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      January 29, 2018

      You can select what should be used after React attributes ({} or "") in Preferences | Editor | Code Style | HTML – Other – Add for JSX attributes.

  5. Avatar

    Doug says:

    April 21, 2018

    Setting –watch causes test to run continuously w/o stopping. Unable to figure out why. Any help would be appreciated.

    WebStorm 2017.3.5
    Build #WS-173.4674.32, built on March 5, 2018
    Licensed to me
    Subscription is active until August 16, 2018
    JRE: 1.8.0_152-release-1024-b15 x86_64
    JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
    Mac OS X 10.13.4

    Mocha options: –require babel-core/register –watch
    The other options are set and working as tests do run – they just run continuously which prevents the results from showing because it runs again, endlessly. And if I remove the –watch flag the tests run and show results correctly.

    FWIW: I liked the old way of having a button to toggle watch – not sure why this had to change. Pointers to a fix would be most appreciated because having the integrated testing is an awesome feature but unfortunately it feels broken now.

    • Avatar

      Doug says:

      April 21, 2018

      After some research on this, it seems mocha is what is broken not WebStorm. When I run mocha from terminal directly with –watch flag it has the same bad behavior that I’m complaining about! So, it seems mocha is wanting to remove “–watch” feature in favor of a test runner that does this. If WebStorm could provide the watch button as I’ve used in the past perhaps, we would not need to rely on mocha –watch.

      Any guidance on a workaround is appreciated given this is not a WS issue.

      • Avatar

        Sergey Simonchik says:

        April 23, 2018

        Hi Doug,

        When mocha tests are running with `–watch`, the node process is running w/o stopping indeed. However, tests results are reported for each test run, when an external change happens in files being watched.
        Please see a screencast showing how it reports results in my case: https://www.dropbox.com/s/y5994hviz5w12gd/mocha-with-watch.ogv?dl=0 (here https://github.com/expressjs/express project is being used).

        If I understand correctly, your problem is that test results are not showing because mocha reruns the tests right after the test run is finished. If yes, then probably, it’s caused by some files modifications while tests are running. If it’s not clear what files are modified, you can add extra logging to mocha here (https://github.com/mochajs/mocha/blob/v5.1.1/lib/utils.js#L62) and run with `DEBUG=mocha:*` environment variable.

        Generally, the idea behind running mocha tests with `–watch` is that the tests are running on each change. Previously, there was a toggle button ‘Toggle auto-test’ which also reruns tests on each change.
        Unfortunately, the toggle button has its downsides:
        * It can’t figure out which files should trigger the test run, thus it reruns tests on each change in any file. It may lead to false positive test runs.
        * Since it restarts mocha on each change, mocha starts with clean cache leading to longer test runs if a transpiler is involved.

        Thus, we decided to remove the toggle button in favor of running mocha tests with `–watch`.
        If you faced a particular problem that feels like an issue in IDE integration, feel free to file one in our issue tracker (https://youtrack.jetbrains.com/issues/WEB#newissue). We’d appreciate your feedback.