fix(web): add forgotten ReactRouter#useHref mock (#1537)

#1536 faced some problems in CI
not reproducible locally resulting in a set of changes in the test suite
to make CI happy.

But these CI complaints were right since a mock for ReactRouter#useHref
hook was forgotten and not sent as part of the changes, reason why
initial tests were not working.

web/src/components/core/Link.test.tsx

@@ -21,20 +21,19 @@
 
 import React from "react";
 import { screen } from "@testing-library/react";
-import { installerRender } from "~/test-utils";
+import { plainRender } from "~/test-utils";
 import { Link } from "~/components/core";
 
 describe("Link", () => {
   it("renders an HTML `a` tag with the `href` attribute set to given `to` prop", () => {
-    installerRender(<Link to="somewhere">Agama Link</Link>);
+    plainRender(<Link to="somewhere">Agama Link</Link>);
     const link = screen.getByRole("link", { name: "Agama Link" }) as HTMLLinkElement;
     // NOTE: Link uses ReactRouter#useHref hook which is mocked in test-utils.js
-    // TODO: Not using toHaveAttribute("href", "somewhere") because some weird problems at CI
-    expect(link.href).toContain("somewhere");
+    expect(link).toHaveAttribute("href", "somewhere");
   });
 
   it("renders it as primary when either, using a truthy `isPrimary` prop or `variant` is set to primary", () => {
-    const { rerender } = installerRender(<Link to="somewhere">Agama Link</Link>);
+    const { rerender } = plainRender(<Link to="somewhere">Agama Link</Link>);
     const link = screen.getByRole("link", { name: "Agama Link" });
 
     expect(link.classList.contains("pf-m-primary")).not.toBe(true);
@@ -71,7 +70,7 @@ describe("Link", () => {
   });
 
   it("renders it as secondary when neither is given, a truthy `isPrimary` nor `variant`", () => {
-    const { rerender } = installerRender(<Link to="somewhere">Agama Link</Link>);
+    const { rerender } = plainRender(<Link to="somewhere">Agama Link</Link>);
     const link = screen.getByRole("link", { name: "Agama Link" });
 
     expect(link.classList.contains("pf-m-secondary")).toBe(true);

web/src/components/l10n/L10nPage.test.jsx

@@ -21,7 +21,7 @@
 
 import React from "react";
 import { screen, within } from "@testing-library/react";
-import { installerRender } from "~/test-utils";
+import { plainRender } from "~/test-utils";
 import L10nPage from "~/components/l10n/L10nPage";
 
 let mockLoadedData;
@@ -57,7 +57,7 @@ beforeEach(() => {
 });
 
 it("renders a section for configuring the language", () => {
-  installerRender(<L10nPage />);
+  plainRender(<L10nPage />);
   const region = screen.getByRole("region", { name: "Language" });
   within(region).getByText("English - United States");
   within(region).getByText("Change");
@@ -69,15 +69,15 @@ describe("if there is no selected language", () => {
   });
 
   it("renders a button for selecting a language", () => {
-    installerRender(<L10nPage />);
+    plainRender(<L10nPage />);
     const region = screen.getByRole("region", { name: "Language" });
     within(region).getByText("Not selected yet");
     within(region).getByText("Select");
   });
 });
 
 it("renders a section for configuring the keyboard", () => {
-  installerRender(<L10nPage />);
+  plainRender(<L10nPage />);
   const region = screen.getByRole("region", { name: "Keyboard" });
   within(region).getByText("English");
   within(region).getByText("Change");
@@ -89,15 +89,15 @@ describe("if there is no selected keyboard", () => {
   });
 
   it("renders a button for selecting a keyboard", () => {
-    installerRender(<L10nPage />);
+    plainRender(<L10nPage />);
     const region = screen.getByRole("region", { name: "Keyboard" });
     within(region).getByText("Not selected yet");
     within(region).getByText("Select");
   });
 });
 
 it("renders a section for configuring the time zone", () => {
-  installerRender(<L10nPage />);
+  plainRender(<L10nPage />);
   const region = screen.getByRole("region", { name: "Time zone" });
   within(region).getByText("Europe - Berlin");
   within(region).getByText("Change");
@@ -109,7 +109,7 @@ describe("if there is no selected time zone", () => {
   });
 
   it("renders a button for selecting a time zone", () => {
-    installerRender(<L10nPage />);
+    plainRender(<L10nPage />);
     const region = screen.getByRole("region", { name: "Time zone" });
     within(region).getByText("Not selected yet");
     within(region).getByText("Select");

web/src/test-utils.js

@@ -74,6 +74,7 @@ const mockRoutes = (...routes) => initialRoutes.mockReturnValueOnce(routes);
 // Centralize the react-router-dom mock here
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
+  useHref: (to) => to,
   useNavigate: () => mockNavigateFn,
   Navigate: ({ to: route }) => <>Navigating to {route}</>,
   Outlet: () => <>Outlet Content</>,