Skip to main content

How to use MochaJS Test Result Time Colors

In this article I show how and why MochaJS displays slow test result time info in different colors.

Step 1. Clone the starter project​

Use git to clone my starter repo into a new folder.

git clone https://github.com/mitchallen/autom8able-mochajs-starter.git mocha-colors
cd mocha-colors/
npm install

Run the default tests to make sure the install went okay:

npm test

Step 2. Write the tests​

Replace the contents of test/smoke-test.js with this code:

"use strict";

const assert = require('assert');

describe('result colors', function() {
  it('fast', function(done) {
    // very fast test
    // no test time display
    done();
  });
  it('still fast', function(done) {
    // test time < 50% of slow threshold (75ms)
    // no test time display
    setTimeout(done, 30); // delay in ms
  });
  it('slow (yellow)', function(done) {
    // test time > 50% of slow threshold (75ms)
    // will display test time in yellow
    setTimeout(done, 68);
  });
  it('even slower (red)', function(done) {
    // test time above slow threshold (75ms)
    // will display test time in red
    setTimeout(done, 80);
  });
});

Step 3. Run the tests​

Run the tests:

npm test

TODO - update screenshot​

The test results should look like the screenshot.

The green test results​

The first two tests passed because they ran faster than half of the default slow threshold (75ms). That means they would have to run faster than ~37.5ms to be green. Which means they were "fast enough" to not be concerned about or highlighted in the test results.

Test TimeFormulaResult
0 to ~37.5ms0 to *~threshold 0.5**green – no time display

The slow (yellow) result​

The slow test that took 73ms displays a time value in yellow. That is because it ran faster than the default slow threshold and it took longer than half of that threshold (~37.5ms).

Test TimeFormulaResult
~37.5 to 75ms*~threshold 0.5 to threshold**yellow time display

The even slower (red) result​

The even slower test that took 82ms displays a time value in red. That is because it ran longer than the default slow threshold. It didn’t fail because it was still faster than the default timeout of 2s (2000ms).

Test TimeFormulaResult
75+ms to < timeout> threshold to > timeoutred time display
2000+ms> timeoutred fail display

Step 4. Override the default slow value with a flag​

Let’s say you think that the default slow parameter of 75ms is not right for your testing. Instead you want all tests that take 90ms or less to be yellow, instead of red. You can change the slow parameter with a slow flag.

Run this from the command line:

./node_modules/mocha/bin/mocha --slow 90

Notice that the time displayed for the last test (that took 82ms) is now yellow instead of red.

Step 5. Override the slow default with a method call​

Add another test that also takes 80ms.

it('even slower (but yellow)', function(done) {
  this.slow(90);
  // test time below new slow threshold (90ms)
  // will display test time in yellow
  setTimeout(done, 80);
});

This test makes a call to this.slow with a value of 90. That will override the default parameter. The result will be that the time value will be yellow instead of red. But the setting only applies to that test.

Step 6. Override the slow default with a configuration file​

You may see some old examples online that use mocha.opts for configuring MochaJS options. But that is being deprecated.

The new way to set MochaJS options using a file is to create other types of configuration files. I’ll put a link in the references section to the MochaJS doc on config files. In this step I’ll show you how to use a YAML file.

  • Create a file called .mocharc.yml in the root of your project

On a Mac I create it like this:

touch .mocharc.yml

Paste in this code:

slow: 90

Remember that since the file starts with a period (.) it will be hidden on most operating systems. So on a Mac or Linux you can see it listed using ls -la. You may also be able to see it in your IDE.

Run the tests again and you will notice that every slow test under 90ms will display the time as yellow.

Because that is a config file the setting will aways apply when you run the tests. You can either comment it out or change it to the default of 75 (75ms).

You can comment out the line in the YAML file using a pound sign (#) and saving it:

# slow: 90

If you want to ignore all settings in the config you can pass the --no-config flag to mocha (note that those are two dashes at the front):

./node_modules/mocha/bin/mocha --no-config

Troubleshooting​

If you are having trouble seeing the colors, check the theme you are using.

I took the screenshot using the Mac Terminal Basic theme. I can also see the colors using the Homebrew theme.

If you are still having issues, it may be that you are using a different test result reporter.

Conclusion​

In this article you learned how to do the following:

  • Write tests to demo displaying test results times in various colors
  • Override the default slow parameter using flags, methods and config files

Here are some links to related articles that I’ve written:

References​

  • Configuring Mocha [1]
  • .mocharc.yml example file [2]