React testing library (Nothing was returned from render.)

[7ing7ing]

Hello there.

I´m following a tutorial from youtube and right now I am using the react library tests, but I’m facing an issue I´m not able to solve.

My code is this:

Github code

import React from "react";
import { render } from "@testing-library/react";
import { Form } from "../../components";

jest.mock("react-router-dom");

describe("<Form />", () => {
  it("Renders the <Form/> with populated data", () => {
    const { container, getByText, getByPlaceholderText } = render(
      <Form>
        <Form.Title>Sign in now</Form.Title>

        <Form.Base>
          <Form.Input placeholder="Email address" onChange={() => {}} />
          <Form.Input
            type="password"
            placeholder="Password"
            onChange={() => {}}
          />
          <Form.Submit type="submit" disabled>
            Sign In
          </Form.Submit>
        </Form.Base>

        <Form.Text>
          New to Netflix? <Form.Link to="/signup">Sign up now.</Form.Link>
        </Form.Text>
        <Form.TextSmall>
          This page is protected by Google reCAPTCHA to ensure you're not a bot.
          Learn more.
        </Form.TextSmall>
      </Form>
    );

    expect(
      getByText(
        "This page is protected by Google reCAPTCHA to ensure you're not a bot. Learn more."
      )
    ).toBeTruthy();
    expect(getByText("Sign in now")).toBeTruthy();
    expect(getByText("Sign in")).toBeTruthy();
    expect(getByText("Sign in now").disabled).toBeTruthy();
  });
});

The error is the following:

Error: Uncaught [Error: ForwardRef(Link)(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

I am rendering a form, I don´t understand why it says that. I also tried to return the form inside the render but that did not work.

Thank you.

[jenovs]

It says that Form is missing a return. Can you show your Form component?

[7ing7ing]

This is the form compound component:

Form

And I am using it in here:

Signup

[lasjorg]

Isn’t Form using a default export and you are importing using a named import?

I just skimmed it quickly so I might be overlooking something. Edit: Oh you have index file never mind.

[jenovs]

No, it’s because or Link from react-router-dom.

Anyway, to use Link your app needs to be wrapped in Router.

React Router | Testing Library

[7ing7ing]

I have everything wrapped in app.js (I don´t know if you meant that).

app.js

I´m only having that error issue when testing. Otherwise the web app works fine, no errors in the console.

[jenovs]

Well, if tests are testing items that are using stuff from Router those items need to be wrapped in Router also.

[7ing7ing]

I am using jest.mock(“react-router-dom”); to do that and still have issues.
In any case, I am following a youtube tutorial and this piece of code work for the author of this tutorial. I am comparing my code to his on our github repos and they are the same.

[jenovs]

@7ing7ing

I am using jest.mock(“react-router-dom”);

Oh, didn’t notice. Remove it and wrap the form in Router like in the link I posted.

[7ing7ing]

Thank you for trying, but it does not work.

I did this:

import React from "react";
import { render } from "@testing-library/react";
import { Form } from "../../components";
import { Router } from "react-router-dom";

// jest.mock("react-router-dom");

describe("<Form />", () => {
  it("Renders the <Form/> with populated data", () => {
    const { container, getByText, getByPlaceholderText } = render(
      <Router>
        <Form>
          <Form.Title>Sign in now</Form.Title>

          <Form.Base>
            <Form.Input placeholder="Email address" onChange={() => {}} />
            <Form.Input
              type="password"
              placeholder="Password"
              onChange={() => {}}
            />
            <Form.Submit type="submit" disabled>
              Sign in
            </Form.Submit>
          </Form.Base>

          <Form.Text>
            New to Netflix? <Form.Link to="/signup">Sign up now.</Form.Link>
          </Form.Text>
          <Form.TextSmall>
            This page is protected by Google reCAPTCHA to ensure you're not a
            bot. Learn more.
          </Form.TextSmall>
        </Form>
      </Router>
    );

    expect(
      getByText(
        "This page is protected by Google reCAPTCHA to ensure you're not a bot. Learn more."
      )
    ).toBeTruthy();
    expect(getByText("Sign in now")).toBeTruthy();
    expect(getByText("Sign in")).toBeTruthy();
    expect(getByText("Sign in now").disabled).toBeTruthy();
    expect(getByPlaceholderText("Email address")).toBeTruthy();
    expect(getByPlaceholderText("Password")).toBeTruthy();
    expect(container.firstChild).toMatchSnapshot();
  });

This comes up:

Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'pathname')]   

At this point I’ll just leave it.

[jenovs]

   const history = createMemoryHistory();

    const { container, getByText, getByPlaceholderText } = render(
      <Router history={history}>

[7ing7ing]

I did that as well. I didn’t work, unfortunately.

[jenovs]

Works for me:

[7ing7ing]

I found out that for React Router V6 a little bit different, I had to do this:

      <Router location={history.location} navigator={history}>

Thanks a lot for your help. You pointed me to the right direction.

[jenovs]

Ah, yes, I forgot to mention that I switched to ReactRouter v5