From bbeab861b742b2b3e86493862a4f7622853b8c2d Mon Sep 17 00:00:00 2001
From: Amir Zarrinkafsh <nightah@me.com>
Date: Fri, 3 Jun 2022 10:17:00 +1000
Subject: [PATCH] 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                               | 1 +
 web/src/components/AppStoreBadges.test.tsx         | 6 ++----
 web/src/components/ColoredSnackbarContent.test.tsx | 6 ++----
 web/src/components/PasswordMeter.test.tsx          | 1 +
 web/src/components/PasswordMeter.tsx               | 2 +-
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
index f69d4114..900eef57 100644
--- a/web/src/App.test.tsx
+++ b/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 />);
diff --git a/web/src/components/AppStoreBadges.test.tsx b/web/src/components/AppStoreBadges.test.tsx
index 71c5dbd7..35a6bac3 100644
--- a/web/src/components/AppStoreBadges.test.tsx
+++ b/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");
-    ReactDOM.render(<AppStoreBadges iconSize={32} appleStoreLink="http://apple" googlePlayLink="http://google" />, div);
-    ReactDOM.unmountComponentAtNode(div);
+    render(<AppStoreBadges iconSize={32} appleStoreLink="http://apple" googlePlayLink="http://google" />);
 });
diff --git a/web/src/components/ColoredSnackbarContent.test.tsx b/web/src/components/ColoredSnackbarContent.test.tsx
index 748dc7b0..02af9bbc 100644
--- a/web/src/components/ColoredSnackbarContent.test.tsx
+++ b/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");
-    ReactDOM.render(<ColoredSnackbarContent level="success" message="this is a success" />, div);
-    ReactDOM.unmountComponentAtNode(div);
+    render(<ColoredSnackbarContent level="success" message="" />);
+    expect(screen.getByRole("alert")).toHaveTextContent("");
 });
 
 it("should contain the message", () => {
diff --git a/web/src/components/PasswordMeter.test.tsx b/web/src/components/PasswordMeter.test.tsx
index 790ddd6f..212c9233 100644
--- a/web/src/components/PasswordMeter.test.tsx
+++ b/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", () => {
diff --git a/web/src/components/PasswordMeter.tsx b/web/src/components/PasswordMeter.tsx
index 71b5fb74..43b26143 100644
--- a/web/src/components/PasswordMeter.tsx
+++ b/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",