test --coverage throwing "Nothing was returned from render." error

Question

I am testing the rendering of a simple component. Given below are the source code of the component and test spec.

App.js

import React from 'react';

export const App = () => {
  return (<div data-testid="application">Hello World</div>);
}

App.spec.js

import React from 'react';
import { cleanup, render } from '@testing-library/react';
import { App } from '../App';

beforeEach(cleanup); /* Clean the DOM */

describe('<App />', () => {
  test('Render the application', () => {
    const { queryByTestId } = render(<App />);
    expect(queryByTestId('application')).toBeTruthy();
  });
});

1. When I execute npm test --coverage in a terminal, there are no issues.
2. When I execute npm test -- --coverage in a terminal, I get the below error
3. When I execute yarn test --coverage in a terminal, I get the below error

Error

FAIL src/__tests__/App.spec.js

<App />

✕ Render the application (28ms)

● <App /> › Render the application

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

   7 | describe('<App />', () => {
   8 |   test('Render the application', () => {
>  9 |     const { queryByTestId } = render(<App />);
     |                               ^
  10 |     expect(queryByTestId('application')).toBeTruthy();
  11 |   });
  12 | });

  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/__tests__/App.spec.js:9:31)

Answer 1

If you disable whatchAll the test does not fail, so it renders properly.

Just use:

npm test --coverage --watchAll=false