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

Question

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

kentcdodds opened this issue 4 years ago · comments

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.

Kent C. Dodds · Answer 1 · Sun Mar 22 2020 05:08:38 GMT+0800 (China Standard Time)

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.

Alexander Komarov · Answer 2 · Sun Mar 22 2020 07:04:49 GMT+0800 (China Standard Time)

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

David · Answer 3 · Sun Mar 22 2020 14:04:06 GMT+0800 (China Standard Time)

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

Eugene Samonenko · Answer 4 · Sun Mar 22 2020 17:01:22 GMT+0800 (China Standard Time)

@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)

Ralph Lawrence · Answer 5 · Sun Mar 22 2020 19:37:09 GMT+0800 (China Standard Time)

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

Adam Fields · Answer 6 · Mon Mar 23 2020 00:17:12 GMT+0800 (China Standard Time)

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.

Wes Copeland · Answer 7 · Mon Mar 23 2020 03:08:37 GMT+0800 (China Standard Time)

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.

Kent C. Dodds · Answer 8 · Mon Mar 23 2020 04:37:34 GMT+0800 (China Standard Time)

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

Lizzy Kerrigan · Answer 9 · Tue Mar 24 2020 18:24:07 GMT+0800 (China Standard Time)

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 🤔

Arnold Asllani · Answer 10 · Wed Mar 25 2020 03:08:06 GMT+0800 (China Standard Time)

@ambroseus none of the above worked for me

Wes Copeland · Answer 11 · Wed Mar 25 2020 22:59:41 GMT+0800 (China Standard Time)

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

Alexandru Vlăduţu · Answer 12 · Fri Mar 27 2020 19:41:07 GMT+0800 (China Standard Time)

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

Alexander Komarov · Answer 13 · Sat Mar 28 2020 21:07:34 GMT+0800 (China Standard Time)

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

Sarah Mogin · Answer 14 · Tue Mar 31 2020 01:35:40 GMT+0800 (China Standard Time)

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

Yann Braga · Answer 15 · Tue Mar 31 2020 21:38:33 GMT+0800 (China Standard Time)

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

Nikhil Mehta · Answer 16 · Fri Apr 03 2020 22:42:42 GMT+0800 (China Standard Time)

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

Ali Faris · Answer 17 · Sun Apr 05 2020 18:59:42 GMT+0800 (China Standard Time)

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

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

Aleksei "AlexiuS" Podgaev · Answer 18 · Tue Apr 07 2020 21:04:39 GMT+0800 (China Standard Time)

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

Andrew Galvan · Answer 19 · Sat Apr 11 2020 03:47:03 GMT+0800 (China Standard Time)

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.

Alejandro Camarillo · Answer 20 · Mon Apr 13 2020 10:53:48 GMT+0800 (China Standard Time)

Same issue.

Jacek Kościesza · Answer 21 · Tue Apr 14 2020 20:37:04 GMT+0800 (China Standard Time)

I've the same problem

Paul Coroneos · Answer 22 · Fri Apr 17 2020 04:38:44 GMT+0800 (China Standard Time)

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

Jhonatan Giraldo · Answer 23 · Thu Apr 23 2020 04:12:12 GMT+0800 (China Standard Time)

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

Patrik Affentranger · Answer 24 · Fri Apr 24 2020 18:15:08 GMT+0800 (China Standard Time)

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

t11s · Answer 25 · Fri May 15 2020 08:04:34 GMT+0800 (China Standard Time)

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