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!