Jest: Jest --coverage - Nothing was returned from render

[gunaerode]

When i try to run the jest --coverage it throws following error

To Reproduce

1. clone the repository
2. run npm run test:coverage

Expected behavior

Result should come as below screenshot

Link to repl or repo (highly encouraged)

repository

envinfo

Windows 10
react: ^16.13.0
react-dom : ^16.13.0
jest: ^25.2.3

[technikhil314]

Same here.

"jest": "24.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"@testing-library/react": "^9.3.2",

Any updates on this one?

[SimenB]

I cannot reproduce this using the provided reproduction.

[technikhil314]

@SimenB @gunaerode
I just noticed one thing though not sure what is the root cause

but writing component this way works

```import React from "react";
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Redirect,
Route,
Switch,
} from "react-router-dom";
import Demo from "./components/demo";
import SecuredComponent from "./components/secured";
import store from "./duck/store";
import { securedHOC } from "./hocs/securedHOC";
function App() {
var demo = ();
return demo;
}

export default App;

and not this way 

```import React from "react";
import { Provider } from "react-redux";
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from "react-router-dom";
import Demo from "./components/demo";
import SecuredComponent from "./components/secured";
import store from "./duck/store";
import { securedHOC } from "./hocs/securedHOC";
function App() {
  var demo =   (<Router>
      <Switch>
        <Route path="/home" component={Demo} />
      </Switch>
    </Router>
  );
  return demo;
}

export default App;

Only change i did is i wrote whole jsx in one line vs multiline.

Can it be a prettier or react testing library issue?

[SimenB]

Only change i did is i wrote whole jsx in one line vs multiline.

_Shouldn't_ make a difference.

Can it be a prettier or react testing library issue?

I don't know.

[tnovau]

Same issue here, with a fresh installation from "create-react-app"

Ubuntu 18.04

• "react": "^16.13.1"
• "react-dom": "^16.13.1"
• "react-scripts": "3.4.1"
• "@testing-library/react": "^9.3.2"

Workaround:

Downgrade:

• "react": "16.13.0"
• "react-dom": "16.13.0"
• "react-scripts": "3.4.0"
• "@testing-library/react": "9.3.2"

And it will work :tada:

[technikhil314]

Yeah you are correct @SimenB Apparently I had ejected react-app at my hands and landed up in series of issues. So finally I had to was to the whole setup on my own and it worked with [email protected]

[gunaerode]

I cannot reproduce this using the provided reproduction.

Hi SimenB,
Thank you for your comment
if its possible please share the repo it will be more help full for me

I'm not using create-react-app even i have downgrade the testing library

[tnovau]

Still getting this error.

Steps to reproduce, windows/linux environment.

npx create-react-app something
cd something
SET CI=true && yarn test --coverage

@SimenB could you try this?

[mattiaerre]

Still getting this error.

Steps to reproduce, windows environment.

npx create-react-app something
cd something
SET CI=true && yarn test --coverage

same here; only when adding the --coverage flag

[ismaelpadilla]

I'm experiencing the same error in another project, works fine without the --coverageflag.

[drhaliburton]

Also experiencing this issue with a new create-react-app project. Tests run fine normally, but adding the --coverage flag results in the Nothing was returned from render. error.

Downgrading my dependencies as suggested above does work as a temporary solution.

Edit May 11th 2020:

This issue seems to have been resolved for me. Adding the --coverage works as expected with the following dependencies:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"@testing-library/react": "^9.3.2",

[mattiaerre]

not everything is working for me 🤷‍♂️ these are my dependencies FYI

  "dependencies": {
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/react-hooks": "^3.2.1",
    "@testing-library/user-event": "^10.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "react-test-renderer": "^16.13.1"
  },

[jjercx]

valid tests fail if run with the --coverage flag. I'm using create-react-app, same versions but in Mac OSX. Downgrading works!

Same issue here, with a fresh installation from "create-react-app"

Ubuntu 18.04

• "react": "^16.13.1"
• "react-dom": "^16.13.1"
• "react-scripts": "3.4.1"
• "@testing-library/react": "^9.3.2"

Workaround:

Downgrade:

• "react": "16.13.0"
• "react-dom": "16.13.0"
• "react-scripts": "3.4.0"
• "@testing-library/react": "9.3.2"

And it will work 🎉

[tnovau]

{
  "dependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-scripts": "3.4.1",

  },
  "devDependencies": {
    "@testing-library/jest-dom": "5.5.0",
    "@testing-library/react": "10.0.4",
    "@testing-library/user-event": "10.1.0",
  }
}

Working config 🚀

[SimenB]

I doubt this is an issue in Jest, I recommend opening up an issue with CRA. Especially if locking down CRA deps fixes the issue

[StringEpsilon]

Same issue here. Decided to give a jest upgrade a try (still on jest@23), but running with --coverage results in thousands of tests failing inexplicable with empty renders.

I tried downgrading react and react-dom to 16.13.0, but that doesn't help. Only thing that does helped so far is downgrading to jest 24 or 23.

Also (@SimenB) it's not a CRA project. And unlike others have reported here, we use enzyme instead of @testing-library/react.

[SimenB]

We'll need a reproduction for this one, the one posted didn't reproduce for me

[palerdot]

I'm facing the same issue with this public repo - https://github.com/palerdot/react-d3-speedometer/ ... jest runs fine ... but jest --coverage fails because of this error ... The logs point to mount function of enzyme ... but not sure how jest passes ...

[palerdot]

@SimenB If you need a repo from reproduction, you can use this - https://github.com/palerdot/react-d3-speedometer/ ... I'm getting this error when trying to get coverage ...

[flipb1ts]

I had this issue and it was because I was using a React Material UI theme in my project. Those components that I was referencing in my own components were returning their component with a semi-colon on the end, which caused this problem but only during testing with the code coverage flag.

To resolve it, I went through all the Material components and removed the semi colon

return (
   <div>..</div>
);

to

return (
   <div>..</div>
)

Edit - It also seems that this will throw and error if you are returning just one element

    return (
        <div>Home page</div>
    )

change to
return <div>Home page</div>

[jeysal]

I think I'll have to be that guy - While @palerdot's repo (unlike the one in the OP) reproduces it for me, it's all but a minimal repro, plus we don't even know it's caused by a bug in Jest and not CRA or istanbul or something. So I don't think we have time to do the bug hunting for this, sorry. If a minimal repro turns up, we can investigate.

[swashata]

Hi,

While right now, I cannot give a reproducible minimal repo, I CAN say that it happens in JEST and not CRA. I am using in my project with custom webpack (no CRA installation at all) and finding this issue.

@jeysal and @SimenB I think the issue is with istanbul. When doing coverage, does the latest version of Jest pass the code as-is to istanbul first and then babel-jest? If so, it might explain @flipb1ts solution. I do remember istanbul adding some code to every expression and statement to count coverage. If multi-line JSX breaks the coverage, this might be the cause.

[swashata]

Hi,

Upon further investigation, I have found that it is indeed istanbul issue. For the source code which looks like

export default function AppWrap(props: AppWrapProps) {
    const { children } = props;
    const ref = useRef(null);
    const size = useComponentSize(ref);
    return (
        <ThemeWrapper>
            <AppWrapDiv
                className="wpeform-admin-app"
                id="wpeform-admin-app"
                ref={ref}
            >
                <GlobalStyle />
                <AdminAppWrapContext.Provider value={size}>
                    {children}
                </AdminAppWrapContext.Provider>
            </AppWrapDiv>
        </ThemeWrapper>
    );
}

It gets transformed into

    function AppWrap(props) {
      /* istanbul ignore next */
      cov_2eptln9psz().f[1]++;

      const _ref = (cov_2eptln9psz().s[3]++, props),
            children = _ref.children;

      const ref =
      /* istanbul ignore next */
      (cov_2eptln9psz().s[4]++,
      /* istanbul ignore next */
      (0,
      /* istanbul ignore next */
      _react.
      /* istanbul ignore next */
      useRef)(null));
      const size =
      /* istanbul ignore next */
      (cov_2eptln9psz().s[5]++,
      /* istanbul ignore next */
      (0,
      /* istanbul ignore next */
      _componentSize.
      /* istanbul ignore next */
      default)(ref));

      /* istanbul ignore next */
      cov_2eptln9psz().s[6]++;
      return /*#__PURE__*/
      /* istanbul ignore next */
      _react.default.createElement(
      /* istanbul ignore next */
      _styled.
      /* istanbul ignore next */
      ThemeWrapper,
      /* istanbul ignore next */
      {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 32,
          columnNumber: 3
        }
      }, /*#__PURE__*/
      /* istanbul ignore next */
      _react.default.createElement(AppWrapDiv,
      /* istanbul ignore next */
      {
        className: "wpeform-admin-app",
        id: "wpeform-admin-app",
        ref: ref,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 33,
          columnNumber: 4
        }
      }, /*#__PURE__*/
      /* istanbul ignore next */
      _react.default.createElement(GlobalStyle,
      /* istanbul ignore next */
      {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 38,
          columnNumber: 5
        }
      }), /*#__PURE__*/
      /* istanbul ignore next */
      _react.default.createElement(
      /* istanbul ignore next */

      /* istanbul ignore next */
      _contexts.
      /* istanbul ignore next */
      AdminAppWrapContext.Provider,
      /* istanbul ignore next */
      {
        value: size,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 39,
          columnNumber: 5
        }
      }, children)));
    }

Notice there is no parenthesis near

   return /*#__PURE__*/
      /* istanbul ignore next */

Any pointers on how further I can debug this?

[swashata]

I did some further digging and found, when code-coverage is not running, babel transforms the component just fine

    function AppWrap(props) {
      const children = props.children;
      const ref = (0, _react.useRef)(null);
      const size = (0, _componentSize.default)(ref);
      return /*#__PURE__*/_react.default.createElement(_styled.ThemeWrapper, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 32,
          columnNumber: 3
        }
      }, /*#__PURE__*/_react.default.createElement(AppWrapDiv, {
        className: "wpeform-admin-app",
        id: "wpeform-admin-app",
        ref: ref,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 33,
          columnNumber: 4
        }
      }, /*#__PURE__*/_react.default.createElement(GlobalStyle, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 38,
          columnNumber: 5
        }
      }), /*#__PURE__*/_react.default.createElement(_contexts.AdminAppWrapContext.Provider, {
        value: size,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 39,
          columnNumber: 5
        }
      }, children)));
    }

[rbong]

You actually only need to downgrade to [email protected], not any of the other packages. This doesn't even touch a jest package by the way, so it really appears as if Jest is not at fault.

Probably related:

https://github.com/babel/babel/issues/11305

Looks like it should be fixed soon.

[StringEpsilon]

I assume from the linked issue that one should downgrade @babel/preset-react to 7.8.x, if react-scripts is not used?

Also, from the linked issue, there is a workaround that doesn't require a downgrade:

      ["@babel/preset-react", {
        pragma: "React.createElement",
      }], 

In the respective babel config entry.

[swashata]

Hi @rbong,

You are absolutely correct. Per the babel issue, once I upgraded underlying dependencies, especially @babel/generator to 7.10.2, the issue went away. So this is not really an issue of jest or istanbul, rather of babel, which has already been fixed recently.

[stephyswe]

How to down-grade react-scripts if using CRA ?

[rafaelsorto]

You just need to install the specific version that you need in this case 3.4.0.

yarn add [email protected]

npm install [email protected]

I had the same issue, downgraded from 3.4.1 to 3.4.0 and that fixed it.

[kevbost]

yarn add [email protected]
yarn add -D jest-environment-jsdom-sixteen

{
  "scripts": {
    "test": "react-scripts test --env=jsdom-sixteen",
    "test:coverage": "yarn test --coverage"
  }
}

yarn test:coverage

Confirming that downgrading to 3.4.0 paired with --env=jsdom-sixteen worked in CRA on my local machine (MacOS Catalina).

[dshung1997]

What should I do if I have ejected the CRA?

---

Not sure if this applies to your issue, but I tried to clone my project to a different folder. I succeeded to run test --coverage for the 1st time. But it always failed after this time.

[luchozamora]

@dshung1997 I had the same issue and fixed it in two ways. I think the 2nd one is way cleaner. (I'm using typescript by the way)

First, solved it by adding ts-jest (yarn add ts-jest -D) and then changing package.json settings:
From:

"jest": {
      ...
      "transform": {
            "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
       ... }
... }

To:

"jest": {
      ...
      "transform": {
            "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest",
       ... }
... }

The second solution was upgrading jest to ^26.4.2. Was able to undo the babel-jest -> ts-jest change and it still worked.
Just FYI, I have the following config:

"@testing-library/react": "9.3.2",
"react": "16.13.0",
"react-dom": "16.13.0"

Also set the coverage script to:

"scripts": {
     ...
    "coverage": "CI=true && node scripts/test.js --coverage --watchAll=false"
},

Hope it works!

EDIT: Also had to add react-scripts 3.4.0 to make it work !!

[bartoszgolebiowski]

I think I'll have to be that guy - While @palerdot's repo (unlike the one in the OP) reproduces it for me, it's all but a minimal repro, plus we don't even know it's caused by a bug in Jest and not CRA or istanbul or something. So I don't think we have time to do the bug hunting for this, sorry. If a _minimal_ repro turns up, we can investigate.

https://github.com/bartoszgolebiowski/option-ate/tree/TT-before-presentation
just clone it, change branch to TT-before-presentation

npm install
npm run test:coverage

Can not render React components.

npm install
npm run test

Test passes