Nothing was returned from render.

[Deniz Uğur]

• @testing-library/react version: 9.5.0
• Testing Framework and version: jest-dom 4.2.4
• DOM Environment: jsdom 14.1.0

Relevant code or config:

Navigation.js (Not working)

import React from "react";

export default function Navigation() {
  return <div>Hello</div>;
}

Navigation.test.js

import React from 'react';
import { render } from '@testing-library/react';
import Navigation from './Navigation';

test('renders Navigation without a problem', () => {
  const { getByText } = render(<Navigation />);
  const linkElement = getByText(/Hello/i);
  expect(linkElement).toBeInTheDocument();
});

Navigation.js (Working)

import React from "react";

export default function Navigation() {
  const comp = <div>Hello</div>;
  return comp;
}

What you did:

I just started testing the test-library and I created a very basic functional component like the one above. Then I ran the test file that comes with create-react-app (also given above). I should also add that I have also tried to generate a coverage report with npm test -- --coverage. Only when I try to generate a coverage report this error is thrown.

What happened:

This error is thrown:

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

Reproduction:

I can create a repo if you need to but the only dependency I added was node-sass and mui-org/material-ui library and I haven't used them in this segment.

Problem description:

The weird thing is that if I give the component to be rendered via a variable it works. I'm guessing that this shouldn't be like this.

Suggested solution:

[Rodrigo]

I ran into this problem today and after downgrade react-scripts from 3.4.1 to 3.4.0 I finally solve the problem. Here you can see more information that could be related:

facebook/create-react-app#8689
#622

[Ben Oakenfull]

Downgrading react-scripts from 3.4.0 to 3.4.1 solved the issue for me too

[Kent C. Dodds]

I expect this to be the same as #660, so I'm going to close this as well.

[Lucas Andrade Oliveira]

@kentcdodds I guess this one is different from #660 because here was only reported using --coverage

[hazimdikenli]

downgrading react-scripts to version 3.4.0 and switching to yarn fixed this issue for me.

[Marlos]

same here. I changed react-scripts 3.4.1 to 3.4.0 and fixed.

ps: don't forget to remove node_modules before install again

[Daniel Maldonado]

I ran into this problem today and after downgrade react-scripts from 3.4.1 to 3.4.0 I finally solve the problem. Here you can see more information that could be related:

facebook/create-react-app#8689
#622

works but... what a fix. Thanks !

[Arun George]

Do we know what the underlying issue here was? What changed in between CRA 3.4.0 & 3.4.1 that caused this to happen? Is it the minor bump for @babel/core? Do we know if this issue will be resolved for the next CRA release?

facebook/create-react-app@v3.4.0...v3.4.1

[Luiza Mendes]

Downgrading react-scripts didn't work for me.

[Hung Doan]

Any suggestions if I have ejected CRA?

[Aakarshak Sthapak]

I ran into same problem today. After ejecting CRA and updating jest to version 25. npm i jest@25.5.4. I was able to run test.
Also in your package.json file add below line in scripts section and run your test again.

"test": "node scripts/test.js --coverage --watchAll"

[Rafael Marques Cavalcante Neto]

This problem is also happening in my pipeline, then I can't use the downgrade trick. Did anyone come up with a proper solution yet?

[Haryel Ramalho]

Downgrading react-scripts to 3.4.0 work for me.

[Nxtra]

@kentcdodds, why close this ticket and #660 if it is not fixed yet?

[Kent C. Dodds]

Because this project can't do anything about these issues. It's not related to React Testing Library. It's a problem with other tools.