I’m exploring Jest testing best practices in a basic Create React App setup and facing challenges with how console logs are handled during test runs.
In other ecosystems, logs typically appear only for failed tests and use minimal space making it easier to debug without cluttering the output.
In contrast, Jest prints console.log across all tests and uses excessive vertical space, making it hard to apply TDD effectively. Ideally, I want:
-
Logs to be shown only for failed tests
-
Cleaner, one-line-per-log output
-
Logs tied clearly to the test case that failed
Is there a way to configure Jest or use custom logging utilities to improve this, or is this a limitation of how Jest handles output?
Yeah, this is a common pain point in CRA projects. I’ve had success suppressing logs during passing tests by mocking console.log in a setupTests.js file.
You can override it to only print when process.env.NODE_ENV === 'test' && someGlobalFlag.
Then in your test failure handlers, flip that flag on. It’s a bit of a hack, but it really cleans things up and keeps focus on broken tests.
I built a simple wrapper around console.log that logs only on failures. In each test, I store logs in a buffer and flush them only if the test fails using afterEach + Jest hooks. It makes the output way less noisy.
Also, look into libraries like jest-silent-reporter or write a custom reporter, they give you much better control over formatting and verbosity.
This is more of a Jest limitation than CRA, but you can mitigate it. Use --silent in your Jest config to suppress all logs by default, and combine that with custom logic inside console.log to conditionally print on failure.
I also structure my logs with tags (e.g., [TestName]) and keep them on a single line using JSON.stringify when logging objects, makes it readable and grep-friendly.