Add Jest coverage threshold to create-react-app project

Question

This is the "scripts" section of the package.json file that was initially generated using create-react-app :

"scripts": {
  "start": "concurrently \"react-scripts start\" \"node server.js\"",
  "build": "react-scripts build",
  "eject": "react-scripts eject",
  "test": "react-scripts test --env=jsdom --coverage --watchAll",
  "start:server": "node server"
},

I would like to configure Jest to have a coverage threshold like this:

"jest": {
  "coverageThreshold": {
    "global": {
      "branches": 100,
      "functions": 100,
      "lines": 100,
      "statements": 100
    }
  }
}

However, when I run yarn test it does not look like the "jest" portion is being executed. Is there something extra I need to add b/c this project was built with create-react-app ?

Thanks!

Answer 1

package.json

1. Add a new npm script to coverage

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "coverage": "npm test -- --coverage",
    "eject": "react-scripts eject"
}

2. And add a jest config

"jest": {
    "coverageThreshold": {
      "global": {
        "statements": 100,
        "branches": 50,
        "functions": 100,
        "lines": 100
      }
    }
  },

3. npm run coverage

Answer 2

You can override certain coverage reporting metrics as indicated by create-react-app#coverage-reporting . Mind you, this has to be configured inside your package.json because that is where create-react-app looks for you overrides (aka, not inside .jestrc or jest.config.js files). But as @Andreas mentioned, if you want full control, eject or create your own config.

As a side notes, you may be able to pull out the jest configuration from create-react-app by using the --config flag with test script (from jest) and just copy that into your own config with your updates. May be easier than figuring out what create-react-app is doing.

Answer 3

Now, react-app-rewired could be a new path to take.

You can config Jest in package.json in a jest section mentioned here: https://github.com/timarney/react-app-rewired#2-jest-configuration---testing

Answer 4

The problem is that create-react-app uses its own settings here . The easiest thing would be to eject: npm run eject , to have the full controll over the settings.

Another way would be to copy over all the settings to your own settings and start the test with the additional parameter --config=<pathToYourSettings>

Answer 5

You can refer to this latest link: Configuring threshold limit

By adding this to your package.json:

"jest": {
    "coverageThreshold": {
      "global": {
        "branches": 75,
        "functions": 75,
        "lines": 75,
        "statements": 75
      }
    }
  }