How to get the code coverage report using Jest?

Question

Is there a way to have code coverage in the JavaScript Jest testing framework, which is built on top of Jasmine?

The internal framework does not print out the code coverage it gets. I've also tried using Istanbul, blanket, and JSCover, but none of them work.

Glycerite

I'm not very into jest, but have you seen config.collectCoverage? – Coxcomb

istanbul works fine – Hymnal

Answer 1

When using Jest 21.2.1, I can see code coverage at the command line and create a coverage directory by passing --coverage to the Jest script. Below are some examples:

I tend to install Jest locally, in which case the command might look like this:

npx jest --coverage

I assume (though haven't confirmed), that this would also work if I installed Jest globally:

jest --coverage

The very sparse docs are here

When I navigated into the coverage/lcov-report directory I found an index.html file that could be loaded into a browser. It included the information printed at the command line, plus additional information and some graphical output.

Candlenut

Never use global modules. To ensure version consistency, and package presence, always use the executable in node_modules via ./node_modules/.bin/jest --coverage. As long as the package is named in package.json, you can guarantee execution with the exact version of jest you expect. – Tortricid

How to get jest coverage only for changed files? – Hydroquinone

@ShanikaEdiriweera jestjs.io/docs/en/cli.html#--collectcoveragefromglob – Botchy

@aagjalpankaj Yes, by specifying a collectCoverageFrom array as documented here. – Hornwort

Answer 2

UPDATE: 7/20/2018 - Added links and updated name for coverageReporters.

UPDATE: 8/14/2017 - This answer is totally outdated. Just look at the Jest docs now. They have official support and documentation about how to do this.

@hankhsiao has got a forked repo where Istanbul is working with Jest. Add this to your dev dependencies

 "devDependencies": {
     "jest-cli": "git://github.com/hankhsiao/jest.git"
 }

Also make sure coverage is enabled in your package.json jest entry and you can also specify formats you want. (The html is pretty bad ass).

 "jest": {
     "collectCoverage": true,
     "coverageReporters": ["json", "html"],
 }

See Jest documentation for coverageReporters (default is ["json", "lcov", "text"])

Or add --coverage when you invoke jest.

Uncinate

The coverageFormats option has been removed -- looks like json and html are both generated every time. – Ivelisseivens

I use the --coverage option but absolutely nothing different happens. – Wale

It's (now) called coverageReporters and the default is ["json", "lcov", "text"]. See facebook.github.io/jest/docs/… – Disfigure

dont work, Unknown option "coverageFormats" with value ["json", "html"] was found. – Earmuff

Thanks, setting coverageReporters: ["json", "lcov", "text"] in jest.config.ts fixed the issue for me. – Maladjustment

Answer 3

Jan 2019: Jest version 23.6

For anyone looking into this question recently especially if testing using npm or yarn directly

Currently, you don't have to change the configuration options

As per Jest official website, you can do the following to generate coverage reports:

1- For npm:

You must put -- before passing the --coverage argument of Jest

npm test -- --coverage

if you try invoking the --coverage directly without the -- it won't work

2- For yarn:

You can pass the --coverage argument of jest directly

yarn test --coverage

Pincenez

How to get jest coverage only for changed files? – Hydroquinone

Changed since when? You probably want to use the --watch setting for this. – Donniedonnish

This answer makes a lot of assumptions about the state of ones package.json. – Cohdwell

This gives me coverage for files under /test folder. Definitely not what I was looking for :D – Insulator

I am late here, can I know if we can get the time to take coverage for each test case as well as the test suite to the outputFile? – Rondon

Answer 4

This works for me:

 "jest": {
    "collectCoverage": true,
    "coverageReporters": ["json", "html"]
  },
  "scripts": {
    "test": "jest  --coverage"
  },

Run:

yarn/npm test

Haymow

what is this file? Where does this JSON text go? – Waggoner

Should be package.json. – Sivie

These config properties can also be included in jest.config.js if you have a lot of configs that you don't want cluttering up the package.json file. See Jest docs: jestjs.io/docs/configuration – Cullum

Answer 5

You can run npx jest --coverage -- path/to/your/file.spec.js that will show coverage for affected files

If you want to view this in browser you can do as follows,

1. Go to Browser and CMD+O.
2. Navigate to your repo and search for coverage/lcov-report/index.html

Then you can visually see all the coverage areas.

You can also refer to this link below, for more information https://dev.to/stevescruz/awesome-jest-tip-coverage-report-h5j

Bobettebobina

any idea why is this showing me "unknown %"? – Yorgo

Answer 6

1. Check the latest Jest (v 0.22): https://github.com/facebook/jest

2. The Facebook team adds the Istanbul code coverage output as part of the coverage report and you can use it directly.

3. After executing Jest, you can get a coverage report in the console and under the root folder set by Jest, you will find the coverage report in JSON and HTML format.

4. FYI, if you install from npm, you might not get the latest version; so try the GitHub first and make sure the coverage is what you need.

Nevillenevin

The question was how to get Code coverage for Jest. That Istanbul and Jest don't work together might be true, but that doesn't answer the question. – Hainaut

Answer 7

If you are having trouble with --coverage not working it may also be due to having coverageReporters enabled without 'text' or 'text-summary' being added. From the docs: "Note: Setting this option overwrites the default values. Add "text" or "text-summary" to see a coverage summary in the console output." Source

Jamie

Answer 8

Configure your package.json file

"test": "jest --coverage",

Now run:

yarn test

All the test will start running and you will get the report.

Foliolate

Answer 9

I'd like to add that it may be a good idea to use the collectCoverageFrom option. Otherwise you will get a coverage of the files with actual tests for them, excluding those files without any tests (which might not be what you want).

Of course you can and should exclude specific files where coverage is not needed, but that's a different point.

When you use this option in your configuration, you can see during test execution that coverage is also collected for untested files, e.g.:

 RUNS  projects/some-lib/src/lib/directives/outside-click.directive.spec.ts (7.817 s)
 RUNS  projects/some-lib/src/lib/components/abc-icons/abc-icons.component.spec.ts (8.644 s)
 RUNS  projects/some-lib/src/lib/directives/abc-badge.directive.spec.ts (8.649 s)
Running coverage on untested files...

An example jest.config.ts would be as follows:

import type {Config} from 'jest';

const config: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  collectCoverage: true,
  collectCoverageFrom: ["./src/**"],
  coverageReporters: ['html'],
  coverageDirectory: './coverage'
};

export default config;

Mccalla

Answer 10

I had the same issue and I fixed it as below.

1. install yarn npm install --save-dev yarn
2. install jest-cli npm install --save-dev jest-cli
3. add this to the package.json "jest-coverage": "yarn run jest -- --coverage"

After you write the tests, run the command npm run jest-coverage. This will create a coverage folder in the root directory. /coverage/icov-report/index.html has the HTML view of the code coverage.

Permeability

There is no need to install yarn. Yarn is just different package manager to NPM – Dneprodzerzhinsk

initial -- it is just needed using npm, yarn pass all arguments to jest. – Supercharge

this answer is misleading – Desman