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

kentcdodds · 2020-03-21T21:07:29Z

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.

The text was updated successfully, but these errors were encountered:

kentcdodds · 2020-03-21T21:08:38Z

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 · 2020-03-21T23:04:49Z

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 · 2020-03-22T06:04:06Z

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 · 2020-03-22T09:01:22Z

@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 · 2020-03-22T11:37:09Z

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

adamelliotfields · 2020-03-22T16:17:12Z

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 · 2020-03-22T19:08:37Z

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 · 2020-03-22T20:37:34Z

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 · 2020-03-24T10:24:07Z

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 · 2020-03-24T19:08:06Z

@ambroseus none of the above worked for me

wescopeland · 2020-03-25T14:59:41Z

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

alessioalex · 2020-03-27T11:41:07Z

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/core@7.9.0
├── @babel/plugin-proposal-class-properties@7.8.3
├── @babel/preset-env@7.9.0
├── @babel/preset-react@7.9.4
├── @frontendmasters/pet@1.0.3
├── @reach/router@1.3.3
├── @testing-library/react@10.0.1
├── babel-eslint@10.1.0
├── cross-env@7.0.2
├── eslint@6.8.0
├── eslint-config-prettier@6.10.1
├── eslint-plugin-import@2.20.1
├── eslint-plugin-jsx-a11y@6.2.3
├── eslint-plugin-react@7.19.0
├── eslint-plugin-react-hooks@2.5.1
├── jest@25.2.3
├── parcel-bundler@1.12.4
├── prettier@2.0.2
├── react@16.13.1
├── react-dom@16.13.1
└── rimraf@3.0.2

komarovalexander · 2020-03-28T13:07:34Z

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

sarahatwork · 2020-03-30T17:35:40Z

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

yannbf · 2020-03-31T13:38:33Z

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

facebook/create-react-app#8689 is causing our tests to fail in the CI pipeline. As the comments suggest, downgrading to react-scripts 3.4.0 fixes the problem. In addition, fix a test warning due to a missing id field. Signed-off-by: Chris Marchbanks <csmarchbanks@gmail.com>

technikhil314 · 2020-04-03T14:42:42Z

@babel/core@7.9.0
@testing-library/jest-dom@4.2.4
@testing-library/react@9.5.0
@testing-library/user-event@7.2.1
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
jest@25.2.7
jest-css-modules@2.1.0
jest-environment-jsdom-fourteen@1.0.1
jest-resolve@24.9.0
jest-watch-typeahead@0.4.2
prettier@2.0.2
react-app-polyfill@1.0.6
react-dev-utils@10.2.1
react-dom@16.13.1
react-router-dom@5.1.2

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.

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>
  );
}```

alicompiler · 2020-04-05T10:59:42Z

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

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

alexiusp · 2020-04-07T13:04:39Z

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

drewjs · 2020-04-10T19:47:03Z

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.

tribakzero · 2020-04-13T02:53:48Z

Same issue.

JacekKosciesza · 2020-04-14T12:37:04Z

I've the same problem

Work-around for facebook/create-react-app#8689

PaulACoroneos · 2020-04-16T20:38:44Z

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

due to bug with coverage - facebook/create-react-app#8689

Jhonatangiraldo · 2020-04-22T20:12:12Z

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

pzi · 2020-04-24T10:15:08Z

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

- There appears to be a bug in react-scripts that causes running the tests with coverage to fail when in CI mode or if --watchAll=false - Downgrading react-scripts from 3.4.1 to 3.4.0 seems to fix the problem as a workaround for now - See facebook/create-react-app#8689 for more information

version 3.4.1 has a bug see: facebook/create-react-app#8689

transmissions11 · 2020-05-15T00:04:34Z

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

kentcdodds added issue: bug report needs triage labels Mar 21, 2020

neviaumi mentioned this issue Mar 22, 2020

fix(deps): update dependency react-scripts to v3.4.1 neviaumi/spotify-music-player#155

Closed

1 task

ambroseus mentioned this issue Mar 22, 2020

Upgrade to Jest 25 #8362

Merged

alessioalex mentioned this issue Mar 27, 2020

jest coverage currently failing [testing branch - newer versions of deps] btholt/complete-intro-to-react-v5#85

Open

csmarchbanks mentioned this issue Apr 1, 2020

Fix react tests prometheus/prometheus#7077

Merged

svdo added a commit to Zwaai-app/infections-server that referenced this issue Apr 15, 2020

Workaround to fix ci: Adds ci version of test

b73fcba

Work-around for facebook/create-react-app#8689

penx added a commit to penx/storybook-code-coverage that referenced this issue Apr 16, 2020

roll back create-react-app

c69037d

due to bug with coverage - facebook/create-react-app#8689

ncronquist mentioned this issue Apr 26, 2020

test: Fixes Running Tests with Coverage listerlyify/listerlyify-client#2

Merged

ianschmitz closed this as completed in #8362 May 4, 2020

poteirard pushed a commit to ZopaPublic/react-components that referenced this issue May 6, 2020

chore(react-scripts): downgrade to 3.4.0

f61629c

version 3.4.1 has a bug see: facebook/create-react-app#8689

rodrigo-md mentioned this issue May 11, 2020

Nothing was returned from render. testing-library/react-testing-library#663

Closed

lock bot locked and limited conversation to collaborators May 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kentcdodds commented Mar 21, 2020

kentcdodds commented Mar 21, 2020

komarovalexander commented Mar 21, 2020

neviaumi commented Mar 22, 2020

ambroseus commented Mar 22, 2020 •

edited

taijuten commented Mar 22, 2020

adamelliotfields commented Mar 22, 2020 •

edited

wescopeland commented Mar 22, 2020

kentcdodds commented Mar 22, 2020

lizzykerrigan commented Mar 24, 2020

asllani94 commented Mar 24, 2020

wescopeland commented Mar 25, 2020

alessioalex commented Mar 27, 2020

komarovalexander commented Mar 28, 2020 •

edited

sarahatwork commented Mar 30, 2020

yannbf commented Mar 31, 2020

technikhil314 commented Apr 3, 2020 •

edited

alicompiler commented Apr 5, 2020

alexiusp commented Apr 7, 2020

drewjs commented Apr 10, 2020

tribakzero commented Apr 13, 2020

JacekKosciesza commented Apr 14, 2020

PaulACoroneos commented Apr 16, 2020

Jhonatangiraldo commented Apr 22, 2020

pzi commented Apr 24, 2020

transmissions11 commented May 15, 2020

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

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

Comments

kentcdodds commented Mar 21, 2020

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

kentcdodds commented Mar 21, 2020

komarovalexander commented Mar 21, 2020

neviaumi commented Mar 22, 2020

ambroseus commented Mar 22, 2020 • edited

taijuten commented Mar 22, 2020

adamelliotfields commented Mar 22, 2020 • edited

wescopeland commented Mar 22, 2020

kentcdodds commented Mar 22, 2020

lizzykerrigan commented Mar 24, 2020

asllani94 commented Mar 24, 2020

wescopeland commented Mar 25, 2020

alessioalex commented Mar 27, 2020

komarovalexander commented Mar 28, 2020 • edited

sarahatwork commented Mar 30, 2020

yannbf commented Mar 31, 2020

technikhil314 commented Apr 3, 2020 • edited

alicompiler commented Apr 5, 2020

alexiusp commented Apr 7, 2020

drewjs commented Apr 10, 2020

tribakzero commented Apr 13, 2020

JacekKosciesza commented Apr 14, 2020

PaulACoroneos commented Apr 16, 2020

Jhonatangiraldo commented Apr 22, 2020

pzi commented Apr 24, 2020

transmissions11 commented May 15, 2020

ambroseus commented Mar 22, 2020 •

edited

adamelliotfields commented Mar 22, 2020 •

edited

komarovalexander commented Mar 28, 2020 •

edited

technikhil314 commented Apr 3, 2020 •

edited