Create-React-App: Can't trigger code coverage report from package.json script

Question

I'm having some difficulty running full test coverage from a script in the package.json of my create-react-app. Link to repo here;

package.json

{
  "name": "React Kitchen Sink",
   ...
  "dependencies": {
    ...
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "^3.4.4"
  },
  "scripts": {
    "start": "react-scripts -r @cypress/instrument-cra start",
    "start:silent": "BROWSER=none yarn start",
    "start:server": "start-server-and-test start:silent http://localhost:3000",
    "build": "react-scripts build",
    "eject": "react-scripts eject",

    "jest:test": "react-scripts test --env=jest-environment-jsdom-sixteen",
    "jest:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --watchAll=false --coverage",
...
...

running

yarn jest:test

starts the test in watch mode with coverage and if I press a then I get a report with all test passing

but if I do

yarn jest:coverage

Then all test fails

The errors looks something like this:

 FAIL  src/components/Photo/index.test.js
  ● Console

    console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [Error: Photo(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
          at reportException (/Users/norfeldt/Abtion/Playground/react-kitchen-sink/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
          at innerInvokeEventListeners (/Users/norfeldt/Abtion/Playground/react-kitchen-sink/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
          at invokeEventListeners

...

      The above error occurred in the <Photo> component:
          in Photo (at Photo/index.test.js:32)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit <link> to learn more about error boundaries.

  ● has a test id

    Photo(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

...

What happens if you run that react-scripts command directly? — srk
– srk, Commented Feb 24, 2021 at 14:44
I mean instead of running yar test:coverage, try running react-scripts test --env=jest-environment-jsdom-sixteen --watchAll=false --coverage. (You might have to provide the full path to the react-scripts utility.) That would at least help narrow down the problem a bit. — srk
– srk, Commented Feb 24, 2021 at 17:40
@srk that is giving me the same failed test. I have updated my question to show some of the errors — Norfeldt
– Norfeldt, Commented Feb 25, 2021 at 13:32
@Norfeldt try upgrading react-scripts to version >=4.0.0 :) — dglozano
– dglozano, Commented Mar 1, 2021 at 14:32

dglozano · Accepted Answer · 2021-03-01 21:44:20Z

This seems to be a known issue in create-react-app version >3.4.1, in which this bug happens when running react-scripts test with the flags --watchAll=false and --coverage at the same time. It was reported in @facebook/create-react-app#8689

The bug was later fixed by updating the jest version used in CRA to version >25 in the PR @facebook/create-react-app#8362. The fix was included in the new major release of CRA, version 4.0.0.

Therefore, you should upgrade your react-scripts package to version >=4.0.0 and then follow this migration guide (to see if there are any breaking changes that affects you) and then the problem should be fixed.

In your case, I have downloaded your repo and done the following:

Deleted node_modules folder.
Upgraded the react-scripts to version 4.0.0 by executing this command yarn add --exact [email protected] (could be a later 4.x version too).
Run yarn install again.
Finally, tried again yarn test:coverage and it worked like a charm:

If someone else is reading this and upgrading to version 4.0.0 is not an option for some reason, a short term easy fix would be to either:

Remove the flag --watchAll=false and run it like this: react-scripts test --env=jest-environment-jsdom-sixteen --coverage
Or downgrade react-scripts to version 3.4.0.

Behnam · Accepted Answer · 2021-02-24 14:47:59Z

1

Try this script

react-scripts test --collectCoverage

answered Feb 24, 2021 at 14:47

Behnam

6,5191 gold badge44 silver badges37 bronze badges

1 Comment

Norfeldt Over a year ago

that triggers a watch mode and if I press a then all test fails

Collectives™ on Stack Overflow

Create-React-App: Can't trigger code coverage report from package.json script

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related