Coverage report not working #7838

orlandovallejos · 2019-10-17T14:23:11Z

Describe the bug

The problem is that I can't get the coverage report for any project. I used a brand new cra project to test if something is wrong locally but I still have the same problem.
This is what I am supposed to see:

Taken from: https://create-react-app.dev/docs/running-tests/#coverage-reporting

And this is what I see instead:

Did you try recovering your dependencies?

I did.
yarn --version
1.19.1

Environment

Environment Info:

System:
OS: macOS 10.15
CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Browsers:
Chrome: 77.0.3865.120
Firefox: 69.0
Safari: 13.0.2
npmPackages:
react: ^16.10.2 => 16.10.2
react-dom: ^16.10.2 => 16.10.2
react-scripts: 3.2.0 => 3.2.0
npmGlobalPackages:
create-react-app: 0.3.0

Steps to reproduce

Create a new project using CRA
You will see the 3.2.0 version of react-scripts
Run npm test -- --coverage or yarn test --coverage

Expected behavior

I should see the coverage report including the App.js file.

Actual behavior

I see no file included in the report:

Reproducible demo

Just used the latest CRA version in an empty project.

FezVrasta · 2019-10-18T12:15:48Z

I'm hitting the same problem, for now the only workaround I found is to prepend CI=true to yarn test --coverage.

So the working command is CI=true yarn test --coverage --watch

Obviously it has its own downsides.

stale · 2019-11-17T13:02:19Z

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

FezVrasta · 2019-11-17T18:21:15Z

Not stale

yagopv · 2019-11-19T15:59:49Z

If I run it with the watchAll option to false it works

npm test -- --coverage --watchAll=false

rsliusarchuk-prismhr · 2019-11-26T09:11:59Z

Any workarounds to have watch mode with coverage?

yagopv · 2019-11-26T10:50:45Z

Mmmm no idea. When I develop I really don't want the application being instrumented and reporting coverage all time so I'm only generating the report when need to check it

stale · 2019-12-26T11:33:54Z

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

FezVrasta · 2019-12-26T11:40:14Z

STFU stale bot

adyz · 2020-01-10T09:39:36Z

Hello,

I have a similar problem, but this time in the generated HTML for the coverage instead.

Here are the steps I've done in order to reproduce this:

On a fresh install of CRA with typescript (not sure if it matters that much) running npm test -- --coverage --watchAll=false seems to generate a good coverage report and the corresponding HTML in coverage/lcov-report/index.html
The next test was to eject the CRA running npm run eject and ran the test command above again with success.
The last step was to remove the node_modules folder and ran npm install.

When the installation was finished I ran once again the test command and in the terminal, the report had all the coverage reported correctly, but the HTML was just showing the percent sign and no actual numbers (see screenshot attached).

Do you think that the issues are related?
I find the HTML much more helpful than the terminal results.

Not sure how to debug this.
I also know that this happens on other projects that are not generated with CRA.

Thank you!

adyz · 2020-01-13T09:25:18Z

The bug in HTML was fixed: jestjs/jest#9388

digitaldavenyc · 2020-01-28T22:04:07Z

@adyz updating Jest & istanbul to the latest did not fix the issue....

stale · 2020-02-27T22:15:56Z

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

FezVrasta · 2020-02-28T09:01:31Z

Please disable this bot, I implore you

Yegorich555 · 2020-03-05T14:29:02Z

If I run it with the watchAll option to false it works
npm test -- --coverage --watchAll=false

It doesn't fix issue for me

ericdsw · 2020-03-26T20:32:21Z

Can confirm that, on a project manged by yarn, running CI=true react-scripts test --coverage will result in that error.

Yegorich555 · 2020-03-27T07:16:47Z

I noticed that issue exists because some options have unexpected behavior. In my case I placed {root}/test/jest.config.js and despite on I pointed --coverage argument issue was fixed for me when I setup the following jest.config.js

const path = require("path");

const rootDir = process.cwd();
module.exports = {
  verbose: true,
  rootDir,
  coverageDirectory: "coverage",
  collectCoverageFrom: ["lib/**/*.{js,jsx}"],
};

As you can notice without rootDir it doesn't work, because if not rootDir is pointed the rootDir is __dirname of jest.config.js (if I properly understood).
Also collectCoverageFrom is important

One more weird thing when we have couple projects in jest.config.json:

const rootDir = process.cwd();

const moduleNameMapper = {
  "web-ui-pack": `${rootDir}/lib`
};

module.exports = {
  verbose: true,
  rootDir,
  coverageDirectory: "coverage", // {root}/coverage
  collectCoverage: true,
  collectCoverageFrom: ["lib/**/*.{js,jsx}"],
  moduleNameMapper,
  projects: [
    {
      rootDir, //you should point rootDir here otherwise coverage doesn't work
      displayName: "general",
      testMatch: [`${__dirname}/jest/**/*.test.[jt]s?(x)`],
      moduleNameMapper
    },
    {
      rootDir, //you should point rootDir here otherwise coverage doesn't work
      displayName: "browser-behavior",
      testMatch: [`${__dirname}/browser/**/*.test.[jt]s?(x)`],
      moduleNameMapper,
      ...
    }
  ]
};

As you can see, you must point rootDir to each project. Why is main-rooDir not shared between ones I don't know. The same thing with moduleNameMapper option.

It's unexpected behavior.
roodDir by default should be process.cwd(). Using another definitions is bad practice because packages.json and npm-scripts-runner always placed where process.cwd() pointed.

Summary:

rootDir must be pointed if you placed jest.config.js not in the root and for each project if you use projects option
collectCoverageFrom: [your pattern] must be pointed
collectCoverage: true or argument --coverage in cli must be pointed

As for me, the issue is resolved. But I spent 4 hours for deep in this one :(

alipetarian · 2020-04-15T19:04:12Z

Hi, I am not sure what the following code does.. Try removing that from package.json file.
"jest": { "coverageReporters": [ "json-summary" ] }

and run following command if you are on windows.

set CI=true&& npm run test -- --coverage

justinwaite · 2020-07-21T03:19:11Z

Just throwing my 2 cents, downgrading to 3.4.0 from 3.4.1 worked. Unfortunate, but it works 😄

CedricAgoda · 2020-08-03T15:10:08Z

Just throwing my 2 cents, downgrading to 3.4.0 from 3.4.1 worked. Unfortunate, but it works

That didn't work for me.
Also using CI=true yarn test --coverage throws more error (cannot render App)
I upgraded nodejs from 12.x to latest 14.7 and still have the issue.
BTW I'm using the typescript template

pragyaPS · 2020-08-18T14:49:01Z

Hi, I am not sure what the following code does.. Try removing that from package.json file.
"jest": { "coverageReporters": [ "json-summary" ] }

and run following command if you are on windows.

set CI=true&& npm run test -- --coverage

don't have coverageReporters configured. CI=true&& npm run test -- --coverage didn't work.

alipetarian · 2020-08-18T14:58:32Z

Hi, I am not sure what the following code does.. Try removing that from package.json file.
"jest": { "coverageReporters": [ "json-summary" ] }
and run following command if you are on windows.
set CI=true&& npm run test -- --coverage

don't have coverageReporters configured. CI=true&& npm run test -- --coverage didn't work.

@pragyaPS would you please share some screenshots of the error that you are getting. If you can share the package.json file that would help me to debug further.

pragyaPS · 2020-08-18T15:13:45Z

@alipetarian

  "name": "react-playgroung",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.9.0",
    "@svgr/webpack": "4.3.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "3.4.2",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^6.6.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "3.0.3",
    "eslint-plugin-flowtype": "4.6.0",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.19.0",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "4.3.0",
    "fs-extra": "^8.1.0",
    "html-webpack-plugin": "4.0.0-beta.11",
    "identity-obj-proxy": "3.0.0",
    "jest": "24.9.0",
    "jest-environment-jsdom-fourteen": "1.0.1",
    "jest-resolve": "24.9.0",
    "jest-watch-typeahead": "0.4.2",
    "mini-css-extract-plugin": "0.9.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dev-utils": "^10.2.1",
    "react-dom": "^16.13.1",
    "resolve": "1.15.0",
    "resolve-url-loader": "3.1.1",
    "sass-loader": "8.0.2",
    "semver": "6.3.0",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "2.3.5",
    "ts-pnp": "1.1.6",
    "url-loader": "2.3.0",
    "webpack": "4.42.0",
    "webpack-dev-server": "3.10.3",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "jest --watch"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

I get the error Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

p-mazhnik · 2020-09-10T19:44:46Z

Only adding ts-jest in transform jest options fixed this issue for me:

"jest": {
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest"
    }

Downgrading didn't help.

UPD: You should install ts-jest first.

luchozamora · 2020-09-16T17:33:28Z

@p-mazhnik Changed "babel-jest" to "ts-jest" and got an error message but running yarn add ts-jest fixed both the message and the coverage report

fraindz · 2021-02-01T18:27:32Z

While I too faced this issue with default configuration (react-scripts:4.0.0), the below script worked perfectly fine for me.

"test:coverage": "react-scripts test --coverage --watchAll=false"

I don't see any reason why this issue should be kept open.

Norfeldt · 2021-02-24T13:59:04Z

@fraindz suggestion is really good - however I believe I'm facing issues with jest-environment-jsdom-sixteen not kicking in correctly.

Because it works just fine when I do yarn jest:test (same as npm test - just renamed the script trigger). But the jest:coverage blows up for me.. 🤨

"jest:test": "react-scripts test --env=jest-environment-jsdom-sixteen",
"jest:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --watchAll=false --coverage",

justgeek · 2021-07-28T13:00:51Z

Just in case it helps anyone moving jest config from package.json to jest.config.js worked for me. I am also not sure, but this might be related to ejecting CRA.

If you ejected CRA, this means you have to configure jest from scratch.

tlaak · 2022-03-18T01:21:14Z

My 2c with react-scripts 5.0.0 and non-ejected CRA project: I also got an empty coverage report and to fix that I need to explicitly pass a path argument: "test:coverage": "react-scripts test --coverage ./src"

ghost · 2022-04-14T05:50:21Z

Coverage does not work for us with simple npm test -- --coverage too. This is used exactly how it's written in docs.
Adding CI=true, --watchAll=false or ./src is a working workaround, but still something fishy here going on.

ashkanahrabi · 2022-04-17T09:13:03Z

Coverage does not work for us with simple npm test -- --coverage too. This is used exactly how it's written in docs. Adding CI=true, --watchAll=false or ./src is a working workaround, but still something fishy here going on.

CI=true npm run test -- --coverage worked fine for me!

I also tried CI=true npm run test -- --coverage --watch-all with watch mode enabled in coverage mode.

Julien-Allard · 2022-06-21T14:03:57Z

I headbutted with this issue, and npm test -- --coverage --watchAll=false worked for me but :

it shows the coverage for every files, and not only the **.test.js files
it doesn't have a watch mode.

raul1991 · 2022-07-14T08:45:06Z

In my case the fault was with the regex given to the collectCoverageFrom argument.

This didn't work

--collectCoverageFrom=\"<rootDir>/packages/**/\"

Worked

--collectCoverageFrom=\"<rootDir>/packages/**/src/**/*.(tsx|ts|js)\"

Maybe we have to more specific?

dnlmelo · 2023-08-25T17:14:11Z

npm test -- --coverage --watchAll=false

With Jest 29 works!

guptavishesh143 · 2024-06-05T20:20:49Z

for me it worked like this

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

specify the folders here: -
"jest": {
"collectCoverageFrom": [
"src/component//.tsx",
"src/components/.tsx",
"!/node_modules/",
"!/src/test-utils/",
"!/src/index.tsx"
],
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
}
},

orlandovallejos added issue: bug report needs triage labels Oct 17, 2019

stale bot added the stale label Nov 17, 2019

stale bot removed the stale label Nov 17, 2019

stale bot added the stale label Dec 26, 2019

stale bot removed the stale label Dec 26, 2019

stale bot added the stale label Feb 27, 2020

stale bot removed the stale label Feb 28, 2020

ianschmitz added issue: needs investigation issue: bug and removed issue: bug report needs triage labels Mar 5, 2020

damfinkel mentioned this issue Aug 25, 2020

Login refactor Wolox/frontend-cookbook#104

Merged

ianjmacintosh mentioned this issue Nov 6, 2020

Add --watchAll=false to coverage docs #10033

Open

iFork mentioned this issue Dec 3, 2020

Part 5c (Testing React apps): jest coverage report does not work with render() of react-testing-library fullstack-hy2020/fullstack-hy2020.github.io#992

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Coverage report not working #7838

Coverage report not working #7838

orlandovallejos commented Oct 17, 2019

FezVrasta commented Oct 18, 2019 •

edited

Loading

stale bot commented Nov 17, 2019

FezVrasta commented Nov 17, 2019

yagopv commented Nov 19, 2019

rsliusarchuk-prismhr commented Nov 26, 2019

yagopv commented Nov 26, 2019

stale bot commented Dec 26, 2019

FezVrasta commented Dec 26, 2019

adyz commented Jan 10, 2020

adyz commented Jan 13, 2020 •

edited

Loading

digitaldavenyc commented Jan 28, 2020

stale bot commented Feb 27, 2020

FezVrasta commented Feb 28, 2020

Yegorich555 commented Mar 5, 2020

ericdsw commented Mar 26, 2020

Yegorich555 commented Mar 27, 2020 •

edited

Loading

alipetarian commented Apr 15, 2020 •

edited

Loading

justinwaite commented Jul 21, 2020

CedricAgoda commented Aug 3, 2020 •

edited

Loading

pragyaPS commented Aug 18, 2020

alipetarian commented Aug 18, 2020

pragyaPS commented Aug 18, 2020

p-mazhnik commented Sep 10, 2020 •

edited

Loading

luchozamora commented Sep 16, 2020

fraindz commented Feb 1, 2021

Norfeldt commented Feb 24, 2021

justgeek commented Jul 28, 2021

tlaak commented Mar 18, 2022

ghost commented Apr 14, 2022

ashkanahrabi commented Apr 17, 2022

Julien-Allard commented Jun 21, 2022 •

edited

Loading

raul1991 commented Jul 14, 2022

dnlmelo commented Aug 25, 2023 •

edited

Loading

guptavishesh143 commented Jun 5, 2024

Coverage report not working #7838

Coverage report not working #7838

Comments

orlandovallejos commented Oct 17, 2019

Describe the bug

Did you try recovering your dependencies?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

FezVrasta commented Oct 18, 2019 • edited Loading

stale bot commented Nov 17, 2019

FezVrasta commented Nov 17, 2019

yagopv commented Nov 19, 2019

rsliusarchuk-prismhr commented Nov 26, 2019

yagopv commented Nov 26, 2019

stale bot commented Dec 26, 2019

FezVrasta commented Dec 26, 2019

adyz commented Jan 10, 2020

adyz commented Jan 13, 2020 • edited Loading

digitaldavenyc commented Jan 28, 2020

stale bot commented Feb 27, 2020

FezVrasta commented Feb 28, 2020

Yegorich555 commented Mar 5, 2020

ericdsw commented Mar 26, 2020

Yegorich555 commented Mar 27, 2020 • edited Loading

alipetarian commented Apr 15, 2020 • edited Loading

justinwaite commented Jul 21, 2020

CedricAgoda commented Aug 3, 2020 • edited Loading

pragyaPS commented Aug 18, 2020

alipetarian commented Aug 18, 2020

pragyaPS commented Aug 18, 2020

p-mazhnik commented Sep 10, 2020 • edited Loading

luchozamora commented Sep 16, 2020

fraindz commented Feb 1, 2021

Norfeldt commented Feb 24, 2021

justgeek commented Jul 28, 2021

tlaak commented Mar 18, 2022

ghost commented Apr 14, 2022

ashkanahrabi commented Apr 17, 2022

Julien-Allard commented Jun 21, 2022 • edited Loading

raul1991 commented Jul 14, 2022

dnlmelo commented Aug 25, 2023 • edited Loading

guptavishesh143 commented Jun 5, 2024

FezVrasta commented Oct 18, 2019 •

edited

Loading

adyz commented Jan 13, 2020 •

edited

Loading

Yegorich555 commented Mar 27, 2020 •

edited

Loading

alipetarian commented Apr 15, 2020 •

edited

Loading

CedricAgoda commented Aug 3, 2020 •

edited

Loading

p-mazhnik commented Sep 10, 2020 •

edited

Loading

Julien-Allard commented Jun 21, 2022 •

edited

Loading

dnlmelo commented Aug 25, 2023 •

edited

Loading