Делаю тесты, все как показывает преподаватель, даже уже просто скопировал код, но почему то ошибка. В общем как я понял в тестах показывает ошибку когда используешь <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();
});
});
Метод render()
должен возвращать JSX.
render() {
return (
<div>some text</div>
)
}
В вашем же случае render()
ничего не возвращает.
Оберните содержание внутри рендера в return
и все должно заработать.
Можно просто вместо 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>
);