Create-react-app: Coverage report not working

[orlandovallejos]

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

1. Create a new project using CRA
2. You will see the 3.2.0 version of react-scripts
3. 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]

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[bot]]

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]

Not stale

[yagopv]

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

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

[rsliusarchuk-prismhr]

Any workarounds to have watch mode with coverage?

[yagopv]

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[bot]]

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]

STFU stale bot

[adyz]

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]

The bug in HTML was fixed: https://github.com/facebook/jest/issues/9388

[digitaldavenyc]

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

[stale[bot]]

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]

Please disable this bot, I implore you

[Yegorich555]

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]

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

[Yegorich555]

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]

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]

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

[CedricAgoda]

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]

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]

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]

@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]

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]

@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