jest: Text Diff coloring bugs in Gitlab CI, Windows, Ubuntu ZSH, and IntelliJ Terminal (25.2.4+)

🐛 Bug Report

Going from 24.9.0 to 25.1.0 causes the coloring to change and no longer be readable in Windows.

Screenshot comparing Jest 24.9 to 25.1 in Command Prompt

Screenshot comparing Jest 24.9 to 25.1 in Powershell

To Reproduce

Steps to reproduce the behavior:

Be on Windows
Cause an error to occur, such as a snapshot mismatch.
Run in Command Prompt (cmd.exe) (unreadable)
Run in Powershell (looks broken)
Run in Git Bash (no coloring at all)

Expected behavior

Colors should provide context for the logged message and be readable.

Link to repl or repo (highly encouraged)

https://github.com/nwutils/nw-vue-cli-example/pull/7/files

That PR updates a bunch of stuff, but I tested it with just updating jest on its own to verify that is the cause.

envinfo

  System:
    OS: Windows 10 10.0.14393
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 22 (7 by maintainers)

Most upvoted comments

I agree that the red/green can be confusing, but all of the “improved” examples shown in #9132 do not look better. Especially anything with a yellow or white background. It’s just painful on the eyes.

TheJaredWilcurt on Feb 4, 2020

Essentially I think jest would need to support multiple color schemes to satisfy everyone because as soon as one starts outputting background colors in a terminal, it will start to look bad depending on background color (terminals can’t do semi-opaque background unfortunately which would be ideal for desaturated backgrounds like this).

I think at least three color schemes would be necessary:

ansi 16 color foreground only like Jest 25
light current scheme
dark current scheme but with darker backgrounds

silverwind on Nov 30, 2020

Are those colors configurable yet from jest? I see that jest-diff got some options but those are not expose in jest.config.js yet are they?

Specifically, I’m looking to get rid of that bright background which is burning my eyes on a dark terminal.

silverwind on Nov 30, 2020

Hello, I don’t know if that helps but it doesn’t seem to be a pure Windows problem because I ran into the exact same issue on Linux with tmux. Since the new version the diff is unreadable for me. I’m on ArchLinux, using XTerm with tmux and it looks like this:

When I try it only in XTerm without tmux running the diff is at least readable, but still not pretty:

In jest 24.9.0 the diff looked always normal for me (red and green on black background).

anneFly on Feb 4, 2020

Same issue on Windows.

galishmann on Feb 4, 2020

I have reached out on a private channel to someone who has helped me in the past.

While we work off-line, any additional details are welcome in this issue from Windows community.

pedrottimark on Jan 24, 2020

Powershell’s output is ugly and looks broken (because, as seen in CMD, it obviously is)
The correct answer for a bug in your project is not to ask everyone else to change their console to work around your bug. No customizations have been performed on CMD/Powershell. They are the default values.
I’d prefer not to have to go through the cumbersome process of setting up Windows Terminal (helped set it on on someone else’s machine and it took over an hour). I also do not intend on changing from cmd as it has literally worked for everything else I’ve had to do for the last decade (with the one exception of setting up ssh). I also don’t see this as an acceptable request for a work around for users.
From my experience with Windows Terminal, it is just a wrapper that can run different command prompts in tabs. So CMD should still function the same inside it.

TheJaredWilcurt on Jan 24, 2020