Skip to content

Nothing was returned from render. #663

@DenizUgur

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions