web: start adapting test to React Router v7

By using the right imports/mocks

Author: dgdavid

web/src/components/l10n/KeyboardSelection.test.tsx

@@ -53,8 +53,8 @@ jest.mock("~/api/api", () => ({
   updateConfig: (config) => mockUpdateConfigFn(config),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 

web/src/components/l10n/LocaleSelection.test.tsx

@@ -53,8 +53,8 @@ jest.mock("~/api/api", () => ({
   updateConfig: (config) => mockUpdateConfigFn(config),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 

web/src/components/l10n/TimezoneSelection.test.tsx

@@ -60,8 +60,8 @@ jest.mock("~/queries/proposal", () => ({
   useProposal: () => ({ l10n: { timezones, timezone: "Europe/Berlin" } }),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 

web/src/components/storage/BootSelection.test.tsx

@@ -98,8 +98,8 @@ const sdc: StorageDevice = {
   udevPaths: ["pci-0000:00-19"],
 };
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 

web/src/test-utils.tsx

@@ -29,7 +29,7 @@
  */
 
 import React from "react";
-import { MemoryRouter, useParams } from "react-router-dom";
+import { MemoryRouter, useParams } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import userEvent from "@testing-library/user-event";
 import { render, within } from "@testing-library/react";
@@ -87,9 +87,9 @@ const mockRoutes = (...routes) => initialRoutes.mockReturnValueOnce(routes);
  */
 const mockParams = (params: ReturnType<typeof useParams>) => (paramsMock = params);
 
-// Centralize the react-router-dom mock here
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+// Centralize the react-router mock here
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useHref: (to) => to,
   useNavigate: () => mockNavigateFn,
   useMatches: () => [],