test(web): fix tests to conform to react18 (#3466)

This change drops the use of ReactDOM which is not supported in React 18. We also fix any test warnings related to i18next.

web/src/App.test.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 
 import App from "@root/App";
+import "@i18n/index.ts";
 
 it("renders without crashing", () => {
     render(<App />);

web/src/components/AppStoreBadges.test.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 
-import ReactDOM from "react-dom";
+import { render } from "@testing-library/react";
 
 import AppStoreBadges from "@components/AppStoreBadges";
 
 it("renders without crashing", () => {
-    const div = document.createElement("div");
+    render(<AppStoreBadges iconSize={32} appleStoreLink="http://apple" googlePlayLink="http://google" />);
-    ReactDOM.render(<AppStoreBadges iconSize={32} appleStoreLink="http://apple" googlePlayLink="http://google" />, div);
-    ReactDOM.unmountComponentAtNode(div);
 });

web/src/components/ColoredSnackbarContent.test.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 
 import { render, screen } from "@testing-library/react";
-import ReactDOM from "react-dom";
 
 import ColoredSnackbarContent from "@components/ColoredSnackbarContent";
 
 it("renders without crashing", () => {
-    const div = document.createElement("div");
+    render(<ColoredSnackbarContent level="success" message="" />);
-    ReactDOM.render(<ColoredSnackbarContent level="success" message="this is a success" />, div);
+    expect(screen.getByRole("alert")).toHaveTextContent("");
-    ReactDOM.unmountComponentAtNode(div);
 });
 
 it("should contain the message", () => {

web/src/components/PasswordMeter.test.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 
 import PasswordMeter from "@components/PasswordMeter";
+import "@i18n/index.ts";
 import { PasswordPolicyMode } from "@models/PasswordPolicy";
 
 it("renders without crashing", () => {

web/src/components/PasswordMeter.tsx

@@ -17,7 +17,7 @@ const PasswordMeter = function (props: Props) {
     const [passwordScore, setPasswordScore] = useState(0);
     const [maxScores, setMaxScores] = useState(0);
     const [feedback, setFeedback] = useState("");
-    const { t: translate } = useTranslation("Portal");
+    const { t: translate } = useTranslation();
     const style = makeStyles((theme) => ({
         progressBar: {
             height: "5px",