Create-react-app: Jest test pass but I always get a “Nothing was returned from render” error when running jest coverage

[DLJames]

Note: I used create-react-app to create a new App, but I got an error I cant fix, I already looked through similar questions; the solutions provided do not solve my problem.

I am getting the following error in my React app:
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29 <br> Error: Uncaught [Error: Test(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

My Jest plug dependencies:

"@testing-library/jest-dom": "^5.11.0",
"@testing-library/react": "^10.4.6",
"@testing-library/user-event": "^12.0.11",
"babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",

I try to search reason on google and get taht maybe this issue caused by babel version, solution looks like below
{ "presets": [ [""@babel/preset-react"", { "pragma": "React.createElement" }] ] }

but we use babel-preset-react-app, so could you help advise how to resolve this issue?

[amickael]

I think this might be the same issue as #8689. Seems like a bug in 3.4.1, current solution is to downgrade react-scripts to 3.4.0.

[DLJames]

I think this might be the same issue as #8689. Seems like a bug in 3.4.1, current solution is to downgrade react-scripts to 3.4.0.

I used npx create-react-app my-app in terminal, I can not find react-scripts plug in my package.js file, so how I can do to downgrade react-scripts to 3.4.0. @amickael

[DLJames]

Hi @kentcdodds I find some solution to resole this issue in this issue #8689 ,
1, I use coverageProvider in jest config to set it to "v8", no issue find but no coverage report -- dont resolve my issue
2, I try to upgrade the jest version to "25.1.0", I still can see the "Nothing was returned" error -- dont resolve my issue
3, Downgraded to react-scripts 3.4.0, but I used npx create-react-app my-app in terminal to new my App, I dont find react-script in my package.json so I dont know how to downgrade version to older

Or do you have any good suggestion to resolve this issue? Thanks.

[kentcdodds]

You may not like this workaround, but you could just not run with coverage enabled until this is fixed:

react-scripts test --env jest-environment-jsdom-sixteen --watchAll=false

[DLJames]

You may not like this workaround, but you could just not run with coverage enabled until this is fixed:

react-scripts test --env jest-environment-jsdom-sixteen --watchAll=false

the create-react-app cli dont install the react-scripts dependency to my app, I dont find this react-scripts dependency in package.json

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
}

@kentcdodds

[DLJames]

Anyone know how to resolve this issus?

[DLJames]

After I ran npm run eject, the react-scripts is gone, and "start": "react-scripts start", changed to "start": "node scripts/start.js", "start": "node scripts/start.js",, and I cant find react-scripts in dependencies, so how I can downgrade react-scripts to 3.4.0. Any other way can resolve this iusse?
@kentcdodds
@amickael

[FedeCanet]

I'm having the same issue when running with --coverage --watchAll. Funny thing is that when I do not run with coverage enabled, it runs smoothly.

[thisismydesign]

@kentcdodds
Could be related to https://github.com/facebook/create-react-app/issues/8687. Do you think it could be fixed on your side? I know this isn't a bug in testing-library but if it's just about moving comments around maybe you could address it.

[kentcdodds]

PRs are welcome. I don't know which comments it could be. I doubt it is related to Testing Library's comments.

I'd suggest anyone with this issue try the alpha version of react-scripts and see if the issue still exists. I have a feeling it'll be fixed.

[PupoSDC]

I was able to get it working by rolling back from 3.4.1 to 3.4.0. However, the issue is now fixed for me with version 3.4.3!

[NdV66]

I updated my CRA project with yarn add --exact [email protected] and I still cannot run coverage. Using react-scripts test --env=jest-environment-jsdom-sixteen --coverage I have empty coverage table/report. With --coverage --watchAll I have the same problem as is described above (a lot of errors with these variables vs without flags all tests are passed).

[Cono52]

having created a fresh CRA today, and coming across this issue, I downgraded from 3.4.3 to 3.4.0 yarn add --exact [email protected] and now it seems to work.

[LZoog]

I am experiencing the same problem in a fresh CRA (with Typescript). Downgrading to 3.4.0 worked for me.

[scottpchow23]

I have found that renaming .js files to .jsx where appropriate also resolves this issue on version 3.4.3.

In the base CRA app, this would mean mv App.js App.jsx.

[chrkaatz]

The same issue happens with [email protected]

[koojaa]

@chrkaatz Same issue here. Any gotchas?

[chrkaatz]

Nothing yet and watching the comments here...