Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get a code coverage report with react-create-app?

If I run

npm test --coverage

the tests pass, but the coverage is not run.

When I change package.json to have

react-scripts test --coverage

Then, when I do npm test and a it runs the tests but not the coverage

The tests run along with the coverage report but the coverage shows all zeroes for coverage

 PASS  src/components/Header/SubHeader.test.js
  The <SubHeader /> component
    ✓ should render (4ms)
    ✓ should render with a goback button (1ms)
    ✓ should render

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   3 passed, 3 total
Time:        1.077s
Ran all test suites.

Finally, I realized that I can do

npm run test .

Question: Why don't the other methods work?

like image 305
Michael Durrant Avatar asked Sep 01 '20 22:09

Michael Durrant


People also ask

What is setupTests js in React?

setupTests. Like Jest and React Testing Library, Jest-DOM is installed with create-react-app. The setupTests. js file is importing the library into our app and giving us access to the matchers. The matcher that was used in our example test was the toBeInTheDocument() method.

How do you use the cobertura code coverage tool?

1. Cobertura Code Coverage Report. Do nothing, just type the following Maven command to download and run the maven-cobertura-plugin automatically. Maven will generate the Cobertura code coverage report at ${project}/target/site/cobertura/index.

How to generate coverage report in react-scripts?

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! Show activity on this post. Since react-scripts has incorporated jest configuration, you can just type in npm run test --coverage or yarn test --coverage, to generate coverage report.

What is the create react app template?

The Create React App template comes with a lot of boilerplate code that should get you up and running with a simple React app in no time. You can then build on top of that and make it as swanky as you’d like. If you open up the package.json file, you’ll see a few scripts you can run. Create React App uses Jest as its test runner.

How to easily test React applications?

Learn how to use Jest and Enzyme to easily test react applications Writing test cases is an important part of React development. Each component should have a test case written correctly so by just running a single command we can make sure that our entire application works correctly no matter how big the application is.

How to generate a coverage report from a test?

So first thing first, run your test in single run mode. Alright, we are getting closer... So now, on top of that add the --coverage flag and you are all set: 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! Show activity on this post.


Video Answer


1 Answers

After revisiting this question i figured out that if you run this you will trigger coverage command and get all results.

SOLUTION 1

npm run test -- --coverage .

When you are passing arguments to npm script, you need to add -- before adding arguments like --coverage. This is just how npm works. See this answer for passing arguments to npm

SOLUTION 2

yarn test --coverage .

EDIT:

I asked a question regarding . being passed down the command and answer is pretty much simple. . is passed because it is a positional parameter, in contrast to --coverage that is option for npm test command: Why is . passed as argument to npm without -- delimiter?

---- Problem analysis ----

PROBLEM 1

npm test --coverage you are not passing --coverage argument to test script.

In the other case when you edit script to be:

react-scripts test --coverage and run npm test here you actually add argument --coverage, but in script itself, not from npm command

PROBLEM 2

When you do npm run test . you are passing . that means you want to include all files in this command.

For some reason . is passed to the npm run test script but not --coverage.

On the other side yarn passes all arguments without --.

like image 61
Mario Petrovic Avatar answered Oct 19 '22 03:10

Mario Petrovic