Create-react-app: Issue when running tests with --watchAll=false --coverage

Created on 21 Mar 2020 · 25Comments · Source: facebook/create-react-app

Describe the bug

When I attempt to run my tests with coverage in CI (or locally for that matter) I get an error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Did you try recovering your dependencies?

N/A (happens on a fresh bootstrap of a new app

Which terms did you search for in User Guide?

N/A, though I did search for the error in the issues and found nothing

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /Users/kentcdodds/.npm/_npx/59115/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.13.1 - ~/n/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.14.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 71.0
    Safari: 13.0.5
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Reproduction steps:

npm create react-app coverage-issues
cd coverage-issues
npx react-scripts test --watchAll=false --coverage

Expected behavior

I expect the test to pass and coverage to be reported

Actual behavior

Here's the relevant output:

 FAIL  src/App.test.js
  ✕ renders learn react link (22ms)

  ● renders learn react link

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

      4 | 
      5 | test('renders learn react link', () => {
    > 6 |   const { getByText } = render(<App />);
        |                         ^
      7 |   const linkElement = getByText(/learn react/i);
      8 |   expect(linkElement).toBeInTheDocument();
      9 | });

      at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14348:23)
      at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:16762:28)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17542:5)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
      at node_modules/react-dom/cjs/react-dom.development.js:24758:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at node_modules/@testing-library/react/dist/pure.js:86:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
      at render (node_modules/@testing-library/react/dist/pure.js:82:26)
      at Object.<anonymous> (src/App.test.js:6:25)

Reproducible demo

The reproduction steps should be enough. You don't need to change anything about the generated project.

I am also experiencing this in all of my react-scripts apps. I think this only started happening in the last week or so.

bug report needs triage

Source

kentcdodds

👍47

Most helpful comment

Ran into this issue today. Downgraded to react-scripts 3.4.0 in my package.json as a workaround.

sarahatwork on 30 Mar 2020

👍7 ❤2 🎉1

All 25 comments

One thing I noticed is that if you remove --watchAll=false or --coverage then this is not an issue. It's only a problem if you have both of those together.

kentcdodds on 21 Mar 2020

👍1

I'm getting the same error without --watchAll
"Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
Travis build https://travis-ci.com/github/komarovalexander/ka-table/builds/154410305

komarovalexander on 22 Mar 2020

👍5

Same issue here with --coverage and CI=true combination

Message

FAIL src/hooks/__tests__/useAccessToken.test.tsx
  ● Test useAccessToken setAccessToken hooks › Should success set the token

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

      28 | describe('Test useAccessToken setAccessToken hooks', () => {
      29 |   it('Should success set the token', () => {
    > 30 |     const { getByTestId } = render(
         |                             ^
      31 |       <MemoryRouter initialEntries={['/']}>
      32 |         <AuthContextProvider>
      33 |           <DummyComponentWillSetToken />

      at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14348:23)

Github action
https://github.com/davidNHK/spotify-music-player/pull/155/checks?check_run_id=524800323

davidNHK on 22 Mar 2020

👍2

@kentcdodds possible root cause: combination of babel 7.9 and jest 24.9 in react-scripts 3.4.1

in case forcing jest to v 25.1 test coverage works as expected

{
  "resolutions": {
    "jest": "25.1.0"
  },
  "scripts": {
    "test:coverage": "SKIP_PREFLIGHT_CHECK=true CI=true react-scripts test --coverage"
  }
}

(https://github.com/facebook/create-react-app/pull/8362)

ambroseus on 22 Mar 2020

👍1

Babel 7.9.3 was just release too, with some issues that may well be related to this

taijuten on 22 Mar 2020

I think this may have fixed itself.

rm -rf node_modules
rm package-lock.json
npm install
CI=true npm test -- --coverage

Edit 1: I experienced this all day yesterday (3/21). It is not longer occurring for me (3/22) on either existing react-scripts projects (after refreshing dependencies) or new create-react-app scaffolded projects.

Edit 2: Using yarn install instead of npm install will reproduce the issue.

adamelliotfields on 22 Mar 2020

👍4 👎2

One thing I noticed is that if you remove --watchAll=false or --coverage then this is not an issue. It's only a problem if you have both of those together.

We are experiencing this with the --coverage flag, even if --watchAll=false is removed.

wescopeland on 22 Mar 2020

👍6

This is likely a problem with the Babel plugin jest uses for coverage reporting. One potential solution is to use v8's built-in coverage reporting via the "coverageProvider" option

kentcdodds on 22 Mar 2020

❤3

Same issue here too. Running tests with --coverage flag return an error, whereas running tests without the --coverage flag run successfully. This has only started happening in the last few days :thinking:

lizzykerrigan on 24 Mar 2020

@ambroseus none of the above worked for me

asllani94 on 24 Mar 2020

👍3

I just did a fresh npm install, coverage seems to be working again 🤷‍♂️

wescopeland on 25 Mar 2020

👍1

Getting the same error when running jest --coverage on a sample project. Running without --coverage works fine.

I think I'm using the latest modules (npm ls --depth=0):

├── @babel/[email protected]
├── @babel/[email protected]
├── @babel/[email protected]
├── @babel/[email protected]
├── @frontendmasters/[email protected]
├── @reach/[email protected]
├── @testing-library/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

alessioalex on 27 Mar 2020

a week ago this error appeared, but today I've cleared the cache and the build passed

komarovalexander on 28 Mar 2020

Ran into this issue today. Downgraded to react-scripts 3.4.0 in my package.json as a workaround.

sarahatwork on 30 Mar 2020

👍7 ❤2 🎉1

Downgrading to react-scripts 3.4.0 worked well. Thanks @sarahatwork !

yannbf on 31 Mar 2020

👍2

@babel/[email protected]
@testing-library/[email protected]
@testing-library/[email protected]
@testing-library/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Same here above it list of all direct dependancies. Upgrading jest does not help either. Any help would be appreciated.

One thing I noticed is that if I write and return jsx in this fashion it works.

import styles from "./demo.module.scss"; export default function Demo() { var demo = ( <h1 className={styles.demo}> Demo </h1> ) return demo; }

but this does not work

import styles from "./demo.module.scss"; export default function Demo() { return ( <h1 className={styles.demo}> Demo </h1> ); }

technikhil314 on 3 Apr 2020

same issue here
running test only with --coverage flag.

downgrading to react-scripts 3.4.0 didn't work for me

alicompiler on 5 Apr 2020

same issue here.
downgrading to react-scripts 3.4.0 worked for me, but i remember there was some other issue with that version in my pipeline, so fixing this problem would be really appreciated

alexiusp on 7 Apr 2020

I was encountering this issue as well when using jest with the --coverage flag. I was able to resolve it by switching to v8 as the coverage provider along with jest-environment-jsdom-sixteen.

drewjs on 10 Apr 2020

Same issue.

tribakzero on 13 Apr 2020

I've the same problem

JacekKosciesza on 14 Apr 2020

Can confirm going to react-scripts 3.4.0 also resolved this issue for me.

PaulACoroneos on 16 Apr 2020

👍5

Thanks, @ambroseus, your solution worked so I can avoid downgrading react-scripts.

As of today 22/april 2020, is it work on this? Are there any plans to fix this bug?

If there is a lack of devs, I offer myself to work on this bug. However not sure if this needs so many fixed dependencies or something similar

Jhonatangiraldo on 22 Apr 2020

Interestingly enough, the coverage report still gets produced accurately, despite all the errors in the console.

pzi on 24 Apr 2020

I was pulling my hair out over this issue but as able to fix it. Problem was that on CI, Create-React-App was defaulting to yarn, which messed up an install somehow, which did not happen on my local machine as I do not have yarn installed.

If you are having this issue (and you don't want to downgrade to 3.4.0, try using --use-npm