React-testing-library: Nothing was returned from render.

[DenizUgur]

• @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-md]

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:

https://github.com/facebook/create-react-app/issues/8689
https://github.com/testing-library/react-testing-library/issues/622

[boakenfull]

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

[kentcdodds]

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

[LucasAndrad]

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

[marlosirapuan]

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

[maldonadod]

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 !

[aruniverse]

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?

https://github.com/facebook/create-react-app/compare/v3.4.0...v3.4.1

[luizamendes]

Downgrading react-scripts didn't work for me.

[hungdoansy]

Any suggestions if I have ejected CRA?

[Aakarshak1]

I ran into same problem today. After ejecting CRA and updating jest to version 25. npm i [email protected]. 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"

[rmc-softdev]

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?

[haryelramalho]

Downgrading react-scripts to 3.4.0 work for me.

[Nxtra]

@kentcdodds, why close this ticket and https://github.com/testing-library/react-testing-library/issues/660 if it is not fixed yet?

[kentcdodds]

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.