Yellow box's white text unreadable in terminal

[TeemuKoivisto]

Hi,

I just ran Jest on my local repo and noted that the yellow box with text "RUNS" inside is totally illegible in my terminal.

My current setup is MacBook Pro (Retina, 15-inch, Mid 2015) and the integrated terminal Visual Studio Code 1.24.0.

Perhaps a different shade of yellow would create more contrast?

[thymikee]

Actual color value of yellow depends on your terminal preferences (e.g. a theme you're using).
For displaying the message with a background, we use the inverse of the default terminal font color. So, it would indicate your default color is blackish?

This is how it looks for me, my default color is white on dark background:

[TeemuKoivisto]

Hmm I have VSCode's Dark+ (default dark). So to fix this I have to change my terminal colors or some jest setting? I have kept my setup quite minimal as possible so I'd prefer not having to change something for the sake of running a single npm command.

[thymikee]

There's no jest config for that. Not sure why it's not playing nice with your theme 🤷‍♀️

[dcalhoun]

This seems to be an issue specific to xterm.js. It is supposedly fixed, but I still see this issue within zeit/hyper, which utilizes xterm.js.

You can see below that the reverse color works correctly in macOS Terminal, but is incorrect in Hyper. Both are using the same color scheme via terminal-snazzy and hyper-snazzy respectively.

It makes sense that @TeemuKoivisto has seen this in VSCode, as it utilizes xterm.js as well. @thymikee any thoughts on why this may be the case?

macOS Terminal (correct)

Hyper (incorrect)

[Tyriar]

It looks like this should be tracked in the xterm.js repo. If someone familiar with jest could look into what data is actually being sent to print the black on yellow block that would be helpful. You can also run the xterm.js demo and enable debug mode to see in the console what's being sent over.

[SimenB]

I agree it does not belong in this repo. Happy to reopen if we're doing something weird.

If someone familiar with jest could look into what data is actually being sent to print the black on yellow block that would be helpful.

Runs:
https://github.com/facebook/jest/blob/37caeddebae5903b1c206318c1923a602b826c48/packages/jest-cli/src/reporters/Status.js#L23-L24

Fails/Pass:
https://github.com/facebook/jest/blob/37caeddebae5903b1c206318c1923a602b826c48/packages/jest-cli/src/reporters/get_result_header.js#L19-L28

[Tyriar]

Seems to work in VS Code. Using this repro:

const chalk = require('chalk');

console.log(chalk.reset.inverse.yellow.bold('test'));

VS Code (xterm.js 3.7.0+):

Hyper (xterm.js 3.4.1?):

I guess vercel/hyper#3214 will fix this for Hyper?

[dcalhoun]

@Tyriar ah, ok. I had not noticed VS Code was now repaired or that Hyper had a xterm.js upgrade on the way. I'll keep an eye on this and open a new issue in xterm.js repository if the issue persists after Hyper's upgrade.

[dcalhoun]

I just tested running Hyper with xterm.js 3.7.0 and this issue no long occurs. 🎉 Whenever Hyper releases an update upgrading xterm.js, this should be resolved. Thanks for the help.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.