React Testing Tutorial - 14 - Code Coverage

[@krishnanigalye1173]

To make it work with npm, use the following code.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"coverage": "npm test -- --coverage"
},

[@shankars101]

Thank you

[@elik3765]

I keep getting 'Unknown command: "coverage"' error. node vv18.13.0

[@lox_07]

@@elik3765 try using "coverage": "npm run test -- --coverage" and in cli, npm run coverage

[@Asli_]

@@lox_07 not working

[@mohanant7557]

@@Asli_ use react-scripts test --coverage

[@vanshajkapoor998]

For npm users use this : {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"coverage": "npm test -- --coverage --watchAll"
}

[@Jesus_Loves_You_Son]

Thank you so much brother

[@djbuffonage9500]

I am using npm and this is how I got it to work
1) added "coverage": "react-scripts test --coverage --watchAll" to the scripts section
2) npm run coverage
I am using node version 18.16.1

[@yasinshaikh9823]

thanxx bro

[@parthadhikari00]

thanks bud

[@code_with_sheynet]

You the best, sir
You tutorial video is My back bone, I just love you! Only your tutorial i understand...

[@jnaras]

Nice. Great work Vishwas.

[@sairamgudiputi8]

To generate coverage report:
"coverage": npm test -- --coverage --watchAll
note: extra double dashes after test.

[@Lohitpant]

thats working for npm.

[@SaifChowdhuryFardin]

thanks for the "note". i was missing that extra double dashes

[@rickyreyes30]

Thank you! This was very helpful. Saved me a ton of time and exactly what I was looking for.

[@ronaldolipata1455]

If you use npm and this doesn't work for you
"coverage" : "npm test -- -- coverage"
Try this instead, it worked for me.
"coverage": "react-scripts test --coverage"
Then run
npm coverage or npm run coverage

[@rohithsinghthakur968]

it worked, thanks bro😀

[@nazsnet]

thank you

[@carlosenriquecastanedaguti8130]

Thanks this worked for me

[@saisashankchavaly2121]

Testing tutorials are very good and very informative .

[@botchu4597]

For NPM users:
"coverage": "npm test -- --coverage --watchAll"
Note: use the extra double dash -- after test to work

[@alweenaiqbal1088]

use following scripts if you don't see the uncovered files-
"test": "react-scripts test -u --watchAll" ,
"coverage": "npm test -- --coverage"
and then run the command - npm run coverage

[@vivekpainyuli214]

nice !

[@pawanpokhriyal1011]

Thanks a lot

[@amitagrawal4494]

Still not working @alweena

[@chtarun2800]

Amazing Work!!
Thanks

[@piyushaggarwal5207]

This is the final script I had using NPM
"coverage": "react-scripts test --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx}' --collectCoverageFrom='!src/components/**/*.{types,stories,constants,test,spec}.{ts,tsx}'"

[@mhasancoder]

Thank You

[@pupil_1]

bruh its not working for me

[@firewatermoonsun]

It's not working.

[@adittttya]

You are a LEGEND!🔥

[@Lohitpant]

this video is very informative and useful for me. Thanks.

[@Theokondak]

Thank you very much! You nailed it!

[@clnia_dev]

What does "statements": -10 mean? Does it mean it will fail if there are no statements executed?

[@parthadhikari00]

For npm users:
"coverage": "react-scripts test --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx}' --collectCoverageFrom='!src/components/**/*.{types,stories,constants,test,spec}.{ts,tsx}'"

[@parthadhikari00]

Run with command: npm run coverage

[@ParthKamal-rr4nr]

How can i use to get the code coverage of my selenium tests in the react app? can you give me any solution for that ?

[@otherme8212]

For People Running into issues for getting the test coverage in case of npm
Run the Following Command
npm i -D --exact jest-watch-typeahead@0.6.5
This worked For me !! Thanks !!!

[@crashcoding6667]

What is branch coverage? why you showed ternary operator?

[@1004robinson]

Thanks a lot

[@imhimmazi7999]

Using npm, i added the following to the script:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"coverage": "react-scripts test --coverage --watchAll"
},
Windows OS, Node v20.12.2

[@061_suryak4]

hi, i got error like could not find react-redux context value; please ensure the component is wrapped in a
but i also wrapped by provider within store and i change old to latest version please gave me a any solution

[@raghavi_kannan]

I tried getting coverage from also the __tests__ folder using the command below.
npm test -- --coverage --watchAll --collectCoverageFrom='src/{components,__tests__}/**/*.{ts,tsx}' but the coverage report did not include the tests folder. what is the mistake here?

[@vinothm7899]

Add it at the end for the package.json file
"jest": {
"collectCoverageFrom": [
"src/**/*.tsx",
"src/components/*.tsx",
"!**/node_modules/**",
"!**/src/test-utils/**",
"!**/src/index.tsx"
],
"coverageThreshold": {
"global": {
"statements": 100,
"branches": 100,
"functions": 100,
"lines": 100
}
}
}

[@cyberboxingleagueoffical]

using --watchAll makes all my tests pass while --watchAll=false gets some of them to fail, any idea why? Also, is there a way for you to exit script after running all the tests with the way you have it set up now? Any help would be appreciated. Thanks!

[@achalagawai3960]

Can you tell me why the test cases are passing but coverage is not increasing.😢😢😢

[@yuliyadykava2540]

thanks for the video! btw is there a way to run only one testing file and create coverage html report only for this file? without running all other tests

[@praveenjayanth3898]

npm run test filename( without extension)

[@rajatpratapsingh3123]

npm test -- --coverage

[@shashankkumar1633]

what is the meaning of **/* in collectCoverageFrom. it is not explained.

[@KumarKumar-gf3pp]

how to get that coverage folder...?

[@amitagrawal4494]

@Codevolution - Can you please let us know how to use code coverage if we are using npm not yarn.

[@jakubgodlewski2506]

the first comment here in the comment section describes it

[@jenricdota]

Hi I have a question, why does it become 50%? I'm really confused. Also how to make it 100%? thanks

[@loganathanchellappan8329]

"coverage" : "npm test -- -- coverage" try this code it's working

[@xiaotingshao3689]

it doesn't work for me, i have to use this command to run:
npm run test -- --coverage

[@naveencrazy5214]

coverage": "react-scripts test --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx}' --collectCoverageFrom='!src/components/**/*.{types,stories,constants,test,spec}.{ts,tsx}'" not working

[@marcus_leon]

Try this if it doesn't work: "coverage": "npm test -- --coverage"

[@piyushsarode556]

Thank you its work for me

[@amitagrawal4494]

Not worked for me

[@sumantagorai5880]

Thanks

[@somewhere_in_bharat]

I am getting 0 in my test coverage table

[@pupil_1]

npm test -- --coverage , for npm users

[@krishnakishore8111]

"coverage": "npm test -- --coverage"
or
"npm run test -- --coverage"
both commands are not working for me its not showing any code coverage table
I googled it and following command working for me
npm test -- --coverage --watchAll=false

[@poojanb3566]

Hi

[@exxedridel9043]

Good video, but some lack of explanations, and you don't respont to community answers so can't like it

[@aitfrihaZaid]

i deleted ,stories,constants,test,spec it shoud works because i want not to display files with .types.tsx but its not working
"coverage": "react-scripts test --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx}' --collectCoverageFrom='!src/components/**/*.{types}.{ts,tsx}'"

[@annavimathi6843]

How to open this report of html I wasn't to do it