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 🤷‍♂️