Why so loud, jest?

Why

Jest by default prints all console.log (warnings, errors, etc) messages to the console. That's great - it helps you understand what's going on in your code when tests run.

The problem starts when your repository grows. You get a mixture of hundreds of logs without being able to connect them to specific tests.

You might be able to use the logs, but there is as big of a chance that they will confuse you (you will think you found a log related to the test you are interested in, but it might be from a different one).

You could just turn all the noise, to at least have a nice output. (especially on CI, no one wants to scroll through tens of pages of Jenkins beautiful UI ;-) )

But that way if something fails, you lose an important debugging tool. Maybe the test does not fail locally, and the logs would make it trivial to understand what happened? But now you have to disable all but the failing test, re-enable logs... nightmare!

With this tiny plugin, you will be able to see ONLY RELEVANT console messages. That means - if all your tests pass, you have a beautiful jest tests report. If something fails - you see logs only for the test that failed!

How

Install this package:

yarn add why-so-loud-jest -D

Add it to your jest.config, with the verbose option
we are setting verbose even though we do not want the logs to be there in most cases
nonetheless when they are needed we want a nice, verbose report with a stack trace.
If you decide to do this you should probably follow the next step as well.

setupFilesAfterEnv: ['why-so-loud-jest'],

verbose: true

Enjoy much quieter jest!

Fix for wrong console messages stack traces

The downside of doing so will be that jest will show the wrong stack traces for the messages. Sad! :-(

If that starts bugging you, there is an option.

Now run npx why-so-loud-jest at the root of your package.
That will create patches for jest that will fix the problem. Follow the instruction displayed by the tool or here:

Please add postinstall script to your package.json:

"scripts": {
  "postinstall": "patch-package"
}

install it:

npm i patch-package

if you use yarn:

yarn add patch-package postinstall-postinstall

(check https://www.npmjs.com/package/patch-package documentation)

run it once manually:

npx patch-package

Credit

The code was inspired by the https://stackoverflow.com/questions/58936650/javascript-jest-how-to-show-logs-from-test-case-only-when-test-fails thread, in particular, @casualcoder and @Finesse

Let me know if you have any questions or thoughts in the comments below.


Let us help you on your journey to Quality Faster

We at Xolv.io specialize in helping our clients get more for less. We can get you to the holy grail of continuous deployment where every commit can go to production — and yes, even for large enterprises.

Feel free to schedule a call or send us a message below to see how we can help.

User icon
Envelope icon

or

Schedule a 30m call
  • For loops in JavaScript (vs _.times)

    From time to time I still see a for loop in JavaScript codebases. Linters are frequently angry about them. Let's see how we can replace them.

  • Sharing scalars between modules with Chimp

    Simplify your Chimp-based project even further with a new @predefined Scalar directive.

  • Adding TypeScript to the official Apollo Platform Tutorial app

    In todays video I go through a preparation of the official Apollo Platform Tutorial App for adding Chimp to it. I decided to divide that task into two steps - first is adding TypeScript to the codebase. Watch me work, struggle, fly through code, hopefully you will learn some tricks :)