Как объявить MemoryRouter в реакте с query параметрами?

Question

[Виктор П.]

Привет, друзья.
Реакт 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();
});

Answer 1

[Виктор П.]

Пока писал походу сам разобрался, соррян

render(
      <MemoryRouter initialEntries={["/epic/details?id=1"]}>
        <Routes>
          <Route path="/epic/details" element={<DetailsPage />} />
        </Routes>
      </MemoryRouter>
    );