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).

jest-watch

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , , . Bookmark the permalink.

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

  1. Derbeerka says:

    Thanks for Mocha’s watch mode!

  2. Sean Lynch says:

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

  3. Rommel Manalo says:

    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 says:

      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. Ellis says:

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

    • Ekaterina Prigara says:

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

  5. Doug says:

    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.

    • Doug says:

      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.

      • Sergey Simonchik says:

        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.

Leave a Reply

Your email address will not be published. Required fields are marked *