Issue when running tests with --watchAll=false --coverage

[kentcdodds]

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.

[kentcdodds]

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.

[komarovalexander]

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

[neviaumi]

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

[ambroseus]

@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"
  }
}

(#8362)

[taijuten]

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

[adamelliotfields]

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.

[wescopeland]

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.

[kentcdodds]

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

[lizzykerrigan]

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 🤔

[asllani94]

@ambroseus none of the above worked for me

[wescopeland]

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