28

I have written unit tests using react testing library(@testing-library/react & @testing-library/dom) and jest-dom(@testing-library/jest-dom). I am able to run my tests successfully.

I am not using jest/jest-cli complete pacakge. I am using react testing library along with that jest-dom(@testing-library/jest-dom) it might be some sub pacakge or something i am not sure what to call it exactly.

How to get code coverage using react testing library?

enter image description here

Improve this question
4
  • 2
    jest has inbuilt coverage tool Istanbul built into it. You just need to use npm run test --coverage Commented Sep 11, 2019 at 9:28
  • Without installing jest/jest-cli is it not possible? imean some thing with @testing-library/jest-dom Commented Sep 11, 2019 at 9:35
  • RTL does not collect coverage. That's the job of your test runner. Follow @SandipNirmal and @Harmenx's advice and run npm run coverage Commented Sep 12, 2019 at 14:02
  • An actual answer to this question exists: https://stackoverflow.com/questions/55991641/npm-test-coverage-never-exits Commented Jan 14, 2020 at 0:52

3 Answers 3

Reset to default
40

Well, create-react-app is giving you a lot out of the box but it is also imposing some constraints...

You can't just add the flag --coverage to npm run test because that script is already running your tests in watch mode (and things like running only failed tests and other things that you can do in the interactive mode would affect your coverage report anyway).

So first thing first, run your test in single run mode.

CI=true react-scripts test --env=jsdom

And because you already have a test task in your package.json you can simplify your task as so:

CI=true npm test -- --env=jsdom

Alright, we are getting closer... So now, on top of that add the --coverage flag and you are all set:

CI=true npm test -- --env=jsdom --coverage

To summarize your npm task could be like:

"test:coverage": "CI=true npm test -- --env=jsdom --coverage"

And you will see your report in the terminal and the coverage folder will be generated, where you can see a lot of useful info, by the way!

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

To make the answer environment independent you can also use cross-env npm package: cross-env CI=true npm test -- --env=jsdom --coverage. Otherwise it requires different syntax on Windows.
Can someone please explain the syntax CI=true => this sets an environment variable, CI=true npm test what does this do? i thought it would have been something like CI=true && npm test. Also what does <space>--</space> means?
@blogbydev CI=true in npm test runs the tests once and forces it to finish afterwards. You'll notice that when you run npm test locally it runs in watcher mode with interactive CLI. The double dashes are a way of passing the arguments that follow to the commands called by the main command
10

Since react-scripts has incorporated jest configuration, you can just type in npm run test --coverage or yarn test --coverage, to generate coverage report.

Improve this answer

Comments

10

An actual answer to this question exists: npm test -- --coverage never exits

The RTL doesn't provide testing coverage stats, but Jest does if you add the following to package.json:

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

Then you can run:

npm run test:coverage

See either the answer I link to above or Watchmaker's answer even further above for more details.

Improve this answer

2 Comments

This answer didn't work for me until I added the test:coverage script to my package.json following @Watchmakers answer above.
Good catch @Raystorm, I forgot the JSON part.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.