Configuring Jest to show code coverage for all of your files

Jest is a great tool. It’s fast, actively maintained and has been working well for us with both our front-end and back-end systems.

Simply put, Jest helps us make CrowdSync better and more stable.

Out of the box though, code coverage is only shown for the files that you’ve written test cases for and any files that those files happen to interact with.

This isn’t bad, but it doesn’t give you a full picture of how covered your code is. This is especially important if you quickly knocked out an MVP without worrying about writing tests.

Yeah, okay, so we are retroactively writing some tests and trying to catch things up. Get off your horse, will ya!

To get things moving in the right direction, I wanted to be able to see what the overall coverage rate was for our entire codebase, not just the few files that we’ve already written tests for.

At first I was thinking the best bet would be to just stub out a test file for each file we wanted to be tested and put a dummy test in there just to get it showing up.

Then I decided that it would be better to read the Jest documentation and see if there was a way to force files into showing up in the coverage report.

Fortunately, there was and it’s very easy to implement!

The most direct approach to showing the coverage on all of your files would be to pass in an argument to jest that is a glob that represents the files you want included in the coverage report:

jest --coverage --collectCoverageFrom=src/**/*.{js,jsx}

Easy enough, but a pain to have to type in each time.

The second approach would be by way of a Jest configuration file. Edit the file jest.config.js in the root of your project and drop this in there:

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,jsx}'],
};

Now all you would have to do is run jest and the configuration will be picked up automatically.

The previous method is great, but it introduced an additional configuration file. The less clutter in the root of your project the better so the method we ended up implementing is to put our Jest configuration options inside of our existing package.json:

{
  "//": "This is where all the existing stuff is...",

  "jest": {
    "collectCoverage": true,
    "collectCoverageFrom": ["src/**/*.{js,jsx}"]
  }
}

Same deal as before, run jest and the configuration will be picked up!

Bonus tip, since there’s not a configuration option to turn on colorized output, you could also slap in a test script to always append the --color flag to jest:

{
  "//": "This is where all the existing stuff is...",

  "scripts": {
    "test": "jest --colors"
  }
}

Now you can run npm test or yarn test and be off to the races!