search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.76k stars 26.86k forks source link

Coverage report not working #7838

Open orlandovallejos opened 5 years ago

orlandovallejos commented 5 years ago

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: image Taken from: https://create-react-app.dev/docs/running-tests/#coverage-reporting

And this is what I see instead: image

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: image

Reproducible demo

Just used the latest CRA version in an empty project.

FezVrasta commented 5 years ago

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] commented 4 years ago

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 commented 4 years ago

Not stale

yagopv commented 4 years ago

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

npm test -- --coverage --watchAll=false
rsliusarchuk-prismhr commented 4 years ago

Any workarounds to have watch mode with coverage?

yagopv commented 4 years ago

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] commented 4 years ago

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 commented 4 years ago

STFU stale bot

adyz commented 4 years ago

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:

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).

Screenshot 2020-01-10 at 11 33 52

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 commented 4 years ago

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

digitaldavenyc commented 4 years ago

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

stale[bot] commented 4 years ago

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 commented 4 years ago

Please disable this bot, I implore you

Yegorich555 commented 4 years ago

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 commented 4 years ago

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

Yegorich555 commented 4 years ago

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:

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

alipetarian commented 4 years ago

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 commented 4 years ago

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

CedricAgoda commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Screen Shot 2020-08-19 at 1 11 58 am
p-mazhnik commented 4 years ago

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 commented 4 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

raul1991 commented 2 years ago

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 commented 1 year ago

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

With Jest 29 works!

guptavishesh143 commented 5 months ago

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 } } },