Why Code Coverage in react app is empty? Tried using npm run test -- --coverage. But always showing empty code coverage

Question

I need help to find code coverage.

I have just created a new app using the latest create-react-app.

I am trying to find the code coverage using npm run test -- --coverage. this is showing empty code coverage. Can any please help me to find where I am missing.

 PASS  src/__tests__/App.test.js
  ✓ renders without crashing (2ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.17s, estimated 1s
Ran all test suites.

Watch Usage: Press w to show more.

Jahdiel

If you just created a new app and you're getting no code coverage it's most likely because no tests have been written. You need to actually write some tests to increase your code coverage. create-react-app comes with the necessary tools to start writing tests with no config. – Reber

Answer 1

https://github.com/facebook/create-react-app/issues/6888

Just add flag --watchAll=false to your npm run test -- --coverage

Shien

I am also getting the same issue but this command didn't helped me – Brittnee

Can you explain the difference with and without --watchAll=false. because watchAll flag is needed for real-time changes right ? – Headlight

Answer 2

Try adding following to your package.json under scripts

"test:coverage": "npm test -- --coverage --watchAll=false",

Then u can run command to check coverage 'npm run test:coverage'

Benioff

Answer 3

I tried following solution given by other authors

"test": "npm test -- --coverage --watchAll=false"

But it failed for me, then I removed extra hyphens(--) and it worked

  "test:coverage": "npm test --coverage --watchAll=false"

Bonus point: Since running test with coverage takes time to generate coverages, so we can add two scripts one for normal test to know whether tests passed or failed and another to generate the coverage.

  "test": "npm test",
  "test:coverage": "npm test --coverage --watchAll=false",

Now you can run test or test with coverage based on the usecases:

npm run test
npm run test:coverage

Telluride