7 Methods to Debug Jest Checks in Terminal

Welcome, you most likely searched find out how to debug your take a look at with Jest. I’m glad you
discovered this weblog publish since you are about to study 7 methods to debug Jest checks
inside your terminal. All people is aware of that you are able to do it simply with an IDE
like VSCode or WebStorm, however what in case you are not utilizing them? How do you go about
debugging them? Spoiler alert – it isn’t with console.log().

1. The Normal Approach

For those who search Jest docs for a option to do it, it should let you know the next:

1. Go to a Chromium-based browser and open chrome://examine.
2. Click on “Open devoted DevTools for Node” like within the screenshot beneath:
   
   
3. Put a debugger assertion someplace in your code (testing or manufacturing one).
4. Run node --inspect-brk node_modules/.bin/jest --runInBand [any other arguments here].

And voilà, your checks ought to run and cease on the debugger within the DevTools you
opened in step 2. Really, the method shall be stopped as quickly as you run it
due to the --inspect-brk, however we are going to get to that later.

Typically in tasks, you aren’t utilizing the uncooked Jest command. Typically it’s
wrapped in another library, or makes use of some further configuration to get it
began. If that’s the case with you, let’s dive in and discover out completely different
methods to debug and examine our checks.

💡 Go away the devoted DevTools for Node window open as we comply with by different methods of debugging.

2. With out an Preliminary Break

For those who have a look, many of the magic right here is completed by the Node Inspector.
What’s cool in regards to the Node Inspector is that while you do node --inspect, a
Node.js course of listens for a debugging consumer on 127.0.0.1:9229. This transformation
received launched in 2016. and allowed
everybody to examine their processes simply.

In our instance within the earlier part, we used node --inspect-brk .... Utilizing
the --inspect-brk flag will break earlier than the person code begins. In my case, I
didn’t care about my checks stopping as quickly as they begin and simply resorted to
the plain node --inspect. node --inspect will break within the place the place you
put your debugger as an alternative of doing it instantly on launch. Let’s transfer with
that to any extent further. Our debugging command shall be:

$ node --inspect node_modules/.bin/jest --runInBand

For the reason that node_modules location can depend upon the working system, we will
make it agnostic and use yarn bin or npm bin. In my case, I’ll use npm bin like so:

$ node --inspect $(npm bin)/jest --runInBand

3. Debugging TypeScript Checks

If you’re utilizing TypeScript nowadays, when you attempt to run:

$ node --inspect $(npm bin)/jest --runInBand

You would possibly get an error as a result of TypeScript checks should not transpiled to
JavaScript. Be sure to configured Jest in jest.config.js much like the next configuration:

module.exports = tsx

We inform Jest to remodel .ts and .tsx information utilizing ts-jest. For those who don’t
have ts-jest, you possibly can set up it with npm set up -D ts-jest, and you need to
be good to go. I made a pattern repo the place you possibly can attempt it out proper right here.

4. Greatest Approach To Debug ™️

OK, so the title of this part guarantees lots, and bear with me. For those who
didn’t hear about Jest watch mode, you’ll love this. Many of the
time I’m writing code, I’ve jest --watch working. What is superb in regards to the
watch mode is that it’ll look ahead to any modifications you made, and run the
associated checks. To debug your checks in watch mode, you possibly can kind the next:

$ node --inspect $(npm bin)/jest --watch --no-cache --runInBand

Let’s break down the Jest arguments a bit right here:

• --watch launches the watch mode from Jest, which is fairly cool.
• --no-cache will ensure that our code is correctly reloaded. You may attempt with out it, however the watch mode may not work correctly.
• --runInBand – OK, this flag has been following us from the beginning. It’s there to ensure all checks run serially in a single course of as an alternative of making youngster processes. Having one course of makes it doable for node --inspect to “examine” checks correctly.

You may also mix different Jest instructions like working a single take a look at:

$ node --inspect $(npm bin)/jest --runTestsByPath src/index.take a look at.ts --runInBand

However don’t forget to connect the --runInBand or simply -i to ensure the
Node.js inspector works its magic.

5. What About CRA?

For those who use create-react-app (CRA) and have your take a look at script use react-scripts
take a look at, debugging shall be a bit completely different for you. A really helpful manner is so as to add a
new script to bundle.json like so:

"scripts": {
  ...,
  "take a look at:debug": "react-scripts --inspect take a look at --runInBand --no-cache"
}

Now, everytime you run npm run take a look at:debug, the Jest will run in watch mode and
cease within the place the place you place debugger. After all, you have to have a
devoted DevTools for Node.js open, as we described within the first part.

6. Debugging From the Command-Line

OK, so you bought the preliminary debugger working with Chromium-based browser and
DevTools. However, in case you are a command-line aficionado, you most likely are considering
of a option to do it with out the DevTools. Excellent news for you, it may be performed.
Fortunately, we’ve node examine to launch a command-line debugger for us. Strive
working simply the next command:

$ node examine $(npm bin)/jest --runInBand

I ran this within the instance repo I made, and that is what I received:

$ node examine $(npm bin)/jest --runInBand
< Debugger listening on ws://127.0.0.1:9229/be2d3410-48ad-46fb-a345-bb37339b5e38
< For assist, see: https://nodejs.org/en/docs/inspector
< Debugger connected.
Break on begin in node_modules/jest/bin/jest.js:9
  7  */
  8
> 9 const importLocal = require('import-local');
 10
 11 if (!importLocal(__filename)) {
debug>

The inspector stopped on the first line inside node_modules/jest/bin/jest.js:9. We are able to go forward and proceed the debugger by typing cont or simply c:

$ node examine $(npm bin)/jest --runInBand
< Debugger listening on ws://127.0.0.1:9229/be2d3410-48ad-46fb-a345-bb37339b5e38
< For assist, see: https://nodejs.org/en/docs/inspector
< Debugger connected.
Break on begin in node_modules/jest/bin/jest.js:9
  7  */
  8
> 9 const importLocal = require('import-local');
 10
 11 if (!importLocal(__filename)) {
debug> cont
break in src/index.take a look at.ts:6
  4 take a look at("add", perform () {
  5     var outcome = index_1.add(1, 2);
> 6     debugger;
  7     anticipate(outcome).toEqual(3);
  8 });
debug>

Now the inspector stopped on the debugger assertion in our take a look at code. We
can kind assist and get acquainted with all of the instructions we will kind
there. I gained’t go over all of them, however I’ll point out the repl command. By
typing the repl whereas contained in the debugger, you’ll enter the
Learn-Eval-Print-Loop (REPL) mode, the place you possibly can consider variables. If I try this
in my instance, I’ll get the next:

$ node examine $(npm bin)/jest --runInBand
< Debugger listening on ws://127.0.0.1:9229/be2d3410-48ad-46fb-a345-bb37339b5e38
< For assist, see: https://nodejs.org/en/docs/inspector
< Debugger connected.
Break on begin in node_modules/jest/bin/jest.js:9
  7  */
  8
> 9 const importLocal = require('import-local');
 10
 11 if (!importLocal(__filename)) {
debug> cont
break in src/index.take a look at.ts:6
  4 take a look at("add", perform () {
  5     var outcome = index_1.add(1, 2);
> 6     debugger;
  7     anticipate(outcome).toEqual(3);
  8 });
debug> repl
Press Ctrl + C to go away debug repl
> outcome
3
>

And people are the idea of inspecting your code from the command-line. The
developer expertise (DX) may not be as nice because the one with DevTools open,
the place you will get values of variables by hovering over them, however it’s nonetheless a
good various. Let’s see how we will open DevTools from the command line in
the subsequent part.

7. All-In-One resolution – ndb

ndb is a library for bettering the debugging expertise for Node.js. You may
set up it globally with npm set up -g ndb or regionally with npm set up -D ndb. I attempted it on my Abacus repo with
the worldwide command like:

$ ndb $(npm bin)/jest --watch --no-cache --runInBand

And it really works nice. As quickly as you kind it, it should open up DevTools for you.
It additionally carried out extra rapidly than plain node --inspect. What’s nice about ndb is which you could run your scripts for bundle.json simply. I managed to run the next:

$ ndb npm run take a look at -- --watch --no-cache --runInBand

I imagine the method with utilizing ndb shall be most interesting to people that need
to do every part from the command line. It saves you from going to your browser
to open DevTools for Node.js. The ndb does it for you.

Ultimate Ideas

That’s it for now, people. It is best to have the ability to decide and select a option to debug
your Jest checks. The thought of debugging checks in Jest was “bugging” me for fairly
a while, and I’m completely satisfied I discovered varied options and that I get to share
them with y’all.

Thanks for tuning in, and remember to subscribe to the
e-newsletter and comply with me on
Twitter for brand new weblog posts and ideas. For those who
discover the publish helpful, take into account sharing it on Twitter along with your good friend and
co-workers:

Bored with utilizing an IDE to debug Jest checks? Discover out new methods you are able to do it from the command line 👇https://t.co/MZA14ogsm7

— Nikola Đuza (@nikolalsvk) March 15, 2021

Till the subsequent one, cheers.