Debug Jest in a NRWL/nx project with webstorm

Lately I’ve started a to migrate our 5 y/o code base into a NRWL/nx monorepo. I’d might write the process of choosing NRWL/nx as our tech of choice in a different post (write in the comments or message me so I can see if there’s any demand for that 🙂 ).

Anyway, while migrating the code, I had to to debug some of the tests, to see why they are not running correctly (hint: it might be someone not knowing how to use Jest’s mock or just someone not really understanding how toString() works…).

Here’s the video for those of you who like this kind of media:

If you prefer the written word (with some static images) here it goes.

  1. Open your NRWL/nx project in webstorm (we have to start with some common ground here…)
  2. Make sure you have a lib or an app with tests (again – common ground is important)
  3. Inside one of the tests, setup a breakpoint by clicking to the right of the line number you want to debug (figure 1).
  4. Now setup a script to be run by webstorm by going to the top toolbar and selecting Run => Edit Configurations (Figure 2).
  5. In the edit configurations screen, click the + sign at the top left corner and create a new Node.js configuration.
  6. In the configuration screen you need to setup 3 things (Figure 3):
    1. Name – just set a name for your convenience
    2. Node parameters – set it to:
      ./node_modules/@nrwl/cli/bin/nx test
    3. Working directory – should be the path to your project folder (e.g. ~/projects/my-current-awesome-project)
  7. Click the debug icon near the running configuration name in the toolbar (Figure 4).

That’s it! The debugger will stop in your

Note that you can set the node parameters to run tests for a certain lib or app by adding its name after test like this:

./node_modules/@nrwl/cli/bin/nx test distributed-cache

The above command will run the tests for the lib distributed-cache.

Figure 1: Green circle with a V mark – the break point in webstorm on Mac. It is usually a red dot on windows.
Figure 2: The Run toolbar panel. The blue-highlighted option is Edit Configuration.
Figure 3: A new Nodejs configuration example
Figure 4: The debug button

Sign up to my newsletter to enjoy more content:

Leave a Reply

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