Делаю Реакт тесты. Error: ForwardRef(Link)

242
03 мая 2022, 03:50

Делаю тесты, все как показывает преподаватель, даже уже просто скопировал код, но почему то ошибка. В общем как я понял в тестах показывает ошибку когда используешь <Link> на что мы вызываем в начале

jest.mock('react-router-dom')

Я также понизил версию скриптов до "react-scripts": "3.4.0"перустановил node-modules

Раньше стоял npm теперь как у преподавателя yarn, но все также вылазиет ошибка.

console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [Error: ForwardRef(Link)(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
          at reportException (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
          at invokeEventListeners (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:209:9)
          at HTMLUnknownElementImpl._dispatch (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:119:9)
          at HTMLUnknownElementImpl.dispatchEvent (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:82:17)
          at HTMLUnknownElementImpl.dispatchEvent (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\nodes\HTMLElement-impl.js:30:27)
          at HTMLUnknownElement.dispatchEvent (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:157:21)
          at Object.invokeGuardedCallbackDev (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\react-dom\cjs\react-dom.development.js:3994:16)
          at invokeGuardedCallback (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\react-dom\cjs\react-dom.development.js:4056:31)
          at beginWork$1 (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\react-dom\cjs\react-dom.development.js:23964:7)
          at performUnitOfWork (C:\Users\Луна\Desktop\CODE\netflix-yarn\node_modules\react-dom\cjs\react-dom.development.js:22779:12) Error: ForwardRef(Link)(...): Nothing was returned from render. This usually means a return statement
is missing. Or, to render nothing, return null.

Она очень длинная и однообразная, в красном шрифте, но в конце вылазиет кусочек кода:

orwardRef(Link)(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
       7 | describe("<Form />", () => {
       8 |   it("renders the <Form /> with populated data", () => {
    >  9 |     const { container, getByText, getByPlaceholderText } = render(
         |                                                            ^
      10 |       <Form>
      11 |         <Form.Title>Sign In Now</Form.Title>

И собственно сам тест:

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").disabled).toBeTruthy();
    expect(getByPlaceholderText("Email address")).toBeTruthy();
    expect(getByPlaceholderText("Password")).toBeTruthy();
    expect(container.firstChild).toMatchSnapshot();
  });
  it("renders the <Form /> with an error", () => {
    const { container, getByText, queryByText } = render(
      <Form>
        <Form.Error>Your email address is already being used</Form.Error>
        <Form.Submit type="submit">Sign In</Form.Submit>
      </Form>
    );
    expect(getByText("Your email address is already being used")).toBeTruthy();
    expect(queryByText("Sign In").disabled).toBeFalsy();
    expect(container.firstChild).toMatchSnapshot();
  });
});
Answer 1

Метод render() должен возвращать JSX.

render() {
    return (
        <div>some text</div>
    )
}

В вашем же случае render() ничего не возвращает.

Оберните содержание внутри рендера в return и все должно заработать.

Answer 2

Можно просто вместо jest.mock('react-router-dom') обернуть все роутером

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

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>
    );
READ ALSO
Вставить переменную PHP [дубликат]

Вставить переменную PHP [дубликат]

Как вставить переменную между тегами p

250
Js scrollTo behavior smooth

Js scrollTo behavior smooth

Есть такой код, который выполняется при событии onWheel

299