Node - change colors on the output when testing with mocha

Question

I have one gulp task which takes care of running test cases using mocha.

gulp.task('test', ['cls'], () => {
    execout('mocha -r ts-node/register --timeout 999999 --colors test/*.test.ts');
});

My problem is that as you can see, there are some gray lines that are very hard to see:

My question is, how can I change that color?

I successfully tried what is recommended here (it works):
https://github.com/mochajs/mocha/issues/802#issuecomment-18254298):

$ gulp test > >(perl -pe 's/\x1b\[90m/\x1b[92m/g') 2> >(perl -pe 's/\x1b\[90m/\x1b[92m/g' 1>&2)

but I don't like that because I don't want to write all that on the command line everytime I wanna run that command.

Then I tried moving all that to inside the gulp task as you can see below:

gulp.task('test', ['cls'], () => {
    execout("mocha -r ts-node/register --timeout 999999 --colors test/*.test.ts > >(perl -pe 's/\x1b\[90m/\x1b[92m/g') 2> >(perl -pe 's/\x1b\[90m/\x1b[92m/g' 1>&2)");
});

But then I got the following error on the terminal.

ERR: > was unexpected at this time.

In the other hand, there is also another suggestion/approach here but I don't know how to use it:

https://github.com/mochajs/mocha/issues/1200#issuecomment-62780003

Any idea on how to modify the color of that difficult to read gray line?

Thanks!

Answer 1

Just change the color in base.js by hands.

Go to: your project root\node_modules\mocha\lib\reporters\base.js and play with numbers..

 exports.colors = {
  pass: 32, //with value 32 your gray "pass" lines become green
  fail: 31,
  'bright pass': 92,
  'bright fail': 91,
  'bright yellow': 93,
  pending: 36,
  suite: 0,
  'error title': 0,
  'error message': 31,
  'error stack': 90,
  checkmark: 32,
  fast: 90,
  medium: 33,
  slow: 31,
  green: 32,
  light: 90,
  'diff gutter': 90,
  'diff added': 32,
  'diff removed': 31
}; 

Or create spec-helper.js file in your project root directory.
Then put --require spec-helper.js to the shell command for Mocha. (see the comments below)

// spec-helper.js
var colors = require('mocha/lib/reporters/base').colors;
    colors['pass'] = 32;

2020 UPDATE:

Since the mochaopts file deprecated and configuration files introduced, you no longer need a helper file. And changing the mocha source code is the worst you can do.

Now you can use the configuration file in javascript format and redefine the colors of the reporter as you wish.

This is the so-called “monkey patching” when you redefine the properties of an object on the fly at run time. - While mocha is initially loading, it uses the configuration file. In that file, you import the 'mocha/lib/reporters/base' module and override colors or symbols. Use that base file for reference. These changes will only exist at run time, and the actual source code will remain untouched.

Place .mocharc.js file in root directory.

//.mocharc.js
const {colors, symbols} = require('mocha/lib/reporters/base');
colors.pass = 32;
symbols.ok = '😀';

// example config from Mocha repo       
module.exports = {
    diff: true,
    extension: ['js'],
    package: './package.json',
    reporter: 'spec',
    slow: 75,
    timeout: 2000,
    ui: 'bdd',
    'watch-files': ['lib/**/*.js','test/**/*.js'],
    'watch-ignore': ['lib/vendor']
  };

See how it might look.

I use Windows Terminal and WSL here. Emoticons may not work in the native Windows console, but on Linux or Mac it should work.

Answer 2

Actually adjust the "Minimum Contrast" in iTerm was the least invasive fix for me. Adjust the value and the invisible text shows up.

See also here: https://gitlab.com/gnachman/iterm2/issues/5992#note_38835787