reactjsnpmjestjs

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?


Solution

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