Привет, друзья.
Реакт 18.2, создал страницу, из query параметров считывается айдишник ?id=1, с этим значением делается запрос на сервер и пришедшие данные как-то отображаются на странице.
Пытаюсь добавить тест, но никак не получается победить этот роутер. Нужно, чтобы параметры были именно query, а не очередным коленом, вот так не должно быть /:id, должно быть именно через знак вопроса
Как правильно написать?
import React from "react";
import { act } from "react-dom/test-utils";
import DetailsPage from "./DetailsPage";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route, MemoryRouter } from "react-router-dom";
import { render, screen } from "@testing-library/react";
let container = null;
let root = null;
beforeEach(() => {
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
root.unmount();
container.remove();
container = null;
root = null;
});
it("renders epic data", async () => {
const fakeEpic = {
id: 1,
assignee: "32",
reporter: "32",
priority: 1,
name: "Build the f-g robot",
description:
"we need to build a caterpillar robot with a camera and a gripper. Autonomous work not less than 4 hours. Important: you need to be able to control via the Internet",
dueDate: new Date("2051-01-01"),
};
jest.spyOn(global, "fetch").mockImplementation(() =>
Promise.resolve({
json: () => Promise.resolve(fakeEpic),
})
);
jest.mock("react-router-dom", () => ({
...jest.requireActual("react-router-dom"),
useLocation: () => ({
searchParams: "id=1",
}),
}));
// Use the asynchronous version of act to apply resolved promises
await act(async () => {
render(
<MemoryRouter initialEntries={["/epic/details"]}>
<Routes>
<Route path="/epic/details?id=1" element={<DetailsPage />} />
</Routes>
</MemoryRouter>
);
});
//console.log(container)
screen.debug();
//expect(container.querySelector("epicName").textContent).toBe(fakeEpic.name);
//expect(container.querySelector("strong").textContent).toBe(fakeEpic.age);
//expect(container.textContent).toContain(fakeEpic.description);
// remove the mock to ensure tests are completely isolated
global.fetch.mockRestore();
});