"Request is not defined" when using useNavigate in Jest

Question

I am trying to test that a certain action navigates as expected. I followed all the instruction to create a memory router, but the test crashed completely with the above error when it reaches the point where it should actually use navigate.

  return new Request(url, init);
  ^

ReferenceError: Request is not defined

Example:

function Example() {
  const navigate = useNavigate();

  function onClick() {
    navigate("/libraries/libraryId");
  }

  return <button onClick={onClick} data-testid="library-entry-libraryId" />;
}

const routes = [
  { path: "/libraries", element: <Example /> },
  { path: "/libraries/:libraryId" },
];

describe("LibraryEntry", () => {
  it("navigates to library", () => {
    const router = createMemoryRouter(routes, {
      initialEntries: ["/libraries"],
    });
    render(<RouterProvider router={router} />);
    const entry = screen.getByTestId(`library-entry-libraryId`);
    fireEvent.click(entry);
  });
});

I am using Jest 29.4.3, with Vite 4.1, and react-router-dom 6.8.1.

I have tried to utilize this answer but it uses Vitest and not Jest. To the best of my ability, I was not able to make my own setup file because Jest uses Babel to transform JS files but I'm using Vite and I need a workaround for this workaround...

You can see why this is frustrating to me. I would love it if anyone has a solution for this, because I've been Googling for hours and came out empty.

"Request is not defined" when using useNavigate in Jest

0 Answers0