Code coverage reports and custom configuration with Istanbul, Jest and React

Setting up Istanbul

Good news, Istanbul is built into Jest! That means that configuration is handled directly by Jest.
The catch here is that Istanbul is not running by default when you create your app with create-react-app template.

There are two ways of running Istanbul along side Jest when test scripts are executed. Both are really simple.

First is running your tests with --coverage flag. Let's add new npm script that will use Istanbul to generate coverage report after running tests:

  //package.json
  {
    ...
    "scripts": {
      ...
      "test": "set CI=true && react-scripts test",  // test run without coverage report
      "test:watch": "react-scripts test",  // run tests in watch mode
      "test:coverage": "set CI=true && react-scripts test --coverage"  // test run that generates coverage reports
    }
  }

This is the best way of introducing Istanbul to your app because you control whether or not reports will be generated based on what script you use.
The reason why you don't want to always create reports is performance, generating reports on every run may significantly slow down your tests!
So when you need coverage report you run npm run test:coverage but when you don't you use npm run test which has faster and less expensive execution.

---

Second way of turning on Istanbul is using collectCoverage property that is false by default.

  //package.json
  {
    ...
    "jest": {
      collectCoverage: true
    }
  }

Doing this will make every test run collect coverage and generate report which is way less flexible then using --coverage flag and can have big performance impact.
I would suggest always setting Istanbul using first way we discussed with coverage flag. That way you will have completely flexible configuration that will allow you to only pay the overhead of collecting coverage when you actually need coverage report.

Custom coverage configuration

Istanbul has many properties that let you customize your coverage report. Same of the most useful or interesting are:

Property collectCoverageFrom lets you define from what sources you want, and more importantly don't want to collect coverage from.
You always want to exclude node_modules directory, some third party code, test files and so on. Using collectCoverageFrom property makes configuring that really easy. Excluding is done with negation operator "!"

"jest": {
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/node_modules/**",
      "!**/coverage/**",
      "!**/serviceWorker.js",
      "!**/index.js"
    ],
}

---

Property coverageThreshold will enforce minimum threshold for coverage results. You can enforce minimums for every entry Istanbul measures: branches, methods, lines and statements.
Cool thing here is that other then global thresholds you can set them up for any separate directory and even for every file!

  "jest": {
    "coverageThreshold": {
      "global": {  // global thresholds
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": 80
      },
      "./src/App.js": {  // file level thresholds
        "lines": 100
      }
    }
  }

There are many more Jest properties, you can really go deep and make configuration that's perfect for your project.
Check them out on Jest documentation.