Fix a whole bunch of frontend test issues

backend/build.gradle

@@ -175,6 +175,7 @@ sonarqube {
         // In order to get both the frontend and backend code to report, we need to set the sonar project to the root directory.
         property "sonar.sources", "backend/src/main/java,frontend/src,ops/services/app_functions/"
         property "sonar.exclusions", "backend/src/**/*Config*.java,frontend/src/**/*.test.*,frontend/src/stories/**/*,frontend/src/**/*.stories.tsx,frontend/src/generated/*.tsx,ops/services/app_functions/**/*.test.*,ops/services/app_functions/**/*config*"
+        property "sonar.coverage.exclusions", "frontend/src/setupTests.js"
         property "sonar.cpd.exclusions", "frontend/src/lang/*.ts"
         property "sonar.javascript.lcov.reportPaths", "frontend/coverage/lcov.info,ops/services/app_functions/report_stream_batched_publisher/functions/coverage/lcov.info"
     }

frontend/package.json

@@ -103,7 +103,9 @@
       "plugin:import/warnings"
     ],
     "plugins": [
-      "graphql"
+      "graphql",
+      "testing-library",
+      "unused-imports"
     ],
     "rules": {
       "graphql/template-strings": [
@@ -124,7 +126,18 @@
         }
       ],
       "import/newline-after-import": 1,
-      "import/no-commonjs": 0
+      "import/no-commonjs": 0,
+      "no-unused-vars": "off",
+      "unused-imports/no-unused-imports": "error",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        {
+          "vars": "all",
+          "varsIgnorePattern": "^_",
+          "args": "after-used",
+          "argsIgnorePattern": "^_"
+        }
+      ]
     },
     "overrides": [
       {
@@ -134,6 +147,24 @@
         "rules": {
           "import/no-anonymous-default-export": "off"
         }
+      },
+      {
+        "files": [
+          "**/__tests__/**/*.[jt]s?(x)",
+          "**/?(*.)+(spec|test).[jt]s?(x)"
+        ],
+        "extends": [
+          "plugin:testing-library/react"
+        ],
+        "rules": {
+          "testing-library/no-render-in-setup": [
+            "error",
+            {
+              "allowTestingFrameworkSetupHook": "beforeEach"
+            }
+          ],
+          "testing-library/no-node-access": "off"
+        }
       }
     ]
   },
@@ -169,7 +200,6 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-modal": "^3.10.6",
     "@types/react-redux": "^7.1.11",
-    "@types/react-test-renderer": "^17.0.1",
     "@types/redux-mock-store": "^1.0.2",
     "@types/smartystreets-javascript-sdk": "^1.6.2",
     "@types/uuid": "^8.3.0",
@@ -181,6 +211,8 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-testing-library": "^5.0.0",
+    "eslint-plugin-unused-imports": "1.1.5",
     "faker": "^5.5.3",
     "geckodriver": "^1.22.3",
     "jest-fetch-mock": "^3.0.3",
@@ -190,7 +222,6 @@
     "nightwatch": "^1.5.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
-    "react-test-renderer": "^17.0.1",
     "redux-mock-store": "^1.5.4",
     "stylelint": "^13.12.0",
     "stylelint-config-standard": "^21.0.0",
@@ -207,4 +238,4 @@
       "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js"
     }
   }
-}
+}

frontend/src/app/App.test.tsx

@@ -2,7 +2,11 @@ import { BrowserRouter as Router, MemoryRouter, Route } from "react-router-dom";
 import { Provider } from "react-redux";
 import createMockStore, { MockStoreEnhanced } from "redux-mock-store";
 import { MockedProvider, MockedResponse } from "@apollo/client/testing";
-import { render, screen, waitFor } from "@testing-library/react";
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { GetTopLevelDashboardMetricsNewDocument } from "../generated/graphql";
@@ -234,9 +238,10 @@ describe("App", () => {
       facilityQueryMock,
       getAnalyticsQueryMock(),
     ]);
-    await waitFor(() => {
-      userEvent.click(screen.getByText("Testing Site", { exact: false }));
-    });
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText("Loading account information...")
+    );
+    userEvent.click(screen.getAllByText("Testing Site", { exact: false })[0]);
     expect(
       await screen.findByText("COVID-19 testing data")
     ).toBeInTheDocument();
@@ -260,9 +265,7 @@ describe("App", () => {
       exact: false,
     });
     expect(trainingWelcome).toBeInTheDocument();
-    await waitFor(() => {
-      userEvent.click(screen.getByText("Got it", { exact: false }));
-    });
+    userEvent.click(screen.getByText("Got it", { exact: false }));
     expect(trainingWelcome).not.toBeInTheDocument();
   });
   it("does not display training notifications outside the training environment", () => {

frontend/src/app/Settings/Facility/Components/ManageDevices.test.tsx

@@ -1,11 +1,5 @@
 import { useState } from "react";
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  within,
-} from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import ManageDevices from "./ManageDevices";
@@ -140,14 +134,14 @@ describe("ManageDevices", () => {
     it("allows user to change the device type on an existing device", async () => {
       const [deviceDropdown] = await screen.findAllByRole("combobox");
 
-      await waitFor(() => {
-        userEvent.selectOptions(deviceDropdown, "device-c");
-      });
+      userEvent.selectOptions(deviceDropdown, "device-c");
 
       expect(
-        (screen.getAllByRole("option", {
-          name: "Device C",
-        })[0] as HTMLOptionElement).selected
+        ((
+          await screen.findAllByRole("option", {
+            name: "Device C",
+          })
+        )[0] as HTMLOptionElement).selected
       ).toBeTruthy();
     });
 
@@ -157,14 +151,14 @@ describe("ManageDevices", () => {
         "combobox"
       );
 
-      await waitFor(() => {
-        userEvent.selectOptions(swabDropdown, "fake-specimen-id-2");
-      });
+      userEvent.selectOptions(swabDropdown, "fake-specimen-id-2");
 
       expect(
-        (screen.getAllByRole("option", {
-          name: "Fake Specimen 2",
-        })[0] as HTMLOptionElement).selected
+        ((
+          await screen.findAllByRole("option", {
+            name: "Fake Specimen 2",
+          })
+        )[0] as HTMLOptionElement).selected
       ).toBeTruthy();
     });
 
@@ -180,9 +174,7 @@ describe("ManageDevices", () => {
 
       expect(dropdowns.length).toBe(4);
 
-      await waitFor(() => {
-        fireEvent.click(screen.getByText("Add device", { exact: false }));
-      });
+      fireEvent.click(screen.getByText("Add device", { exact: false }));
 
       const updatedDropdowns = await screen.findAllByRole("combobox");
       expect(updatedDropdowns.length).toBe(6);
@@ -193,11 +185,9 @@ describe("ManageDevices", () => {
 
       expect(dropdowns.length).toBe(4);
 
-      await waitFor(() => {
-        fireEvent.click(
-          screen.getAllByLabelText("Delete device", { exact: false })[0]
-        );
-      });
+      fireEvent.click(
+        screen.getAllByLabelText("Delete device", { exact: false })[0]
+      );
 
       const updatedDropdowns = await screen.findAllByRole("combobox");
       expect(updatedDropdowns.length).toBe(2);
@@ -217,14 +207,14 @@ describe("ManageDevices", () => {
       ).toBeTruthy();
 
       // Change device to one with _different_ configured swab types
-      await waitFor(() => {
-        userEvent.selectOptions(deviceDropdownElement, "device-b");
-      });
+      userEvent.selectOptions(deviceDropdownElement, "device-b");
 
       expect(
-        (screen.getAllByRole("option", {
-          name: "Fake Specimen 1",
-        })[0] as HTMLOptionElement).selected
+        ((
+          await screen.findAllByRole("option", {
+            name: "Fake Specimen 1",
+          })
+        )[0] as HTMLOptionElement).selected
       ).toBeTruthy();
     });
   });

frontend/src/app/Settings/Facility/Components/ManageDevices.tsx

@@ -26,7 +26,6 @@ const ManageDevices: React.FC<Props> = ({
   updateDefaultDevice,
   deviceSpecimenTypeOptions,
   errors,
-  validateField,
 }) => {
   const deviceErrors: React.ReactNode[] = [];
   if (errors.deviceTypes) {

frontend/src/app/Settings/Facility/FacilityFormContainer.test.tsx

@@ -1,4 +1,8 @@
-import { render, screen, act } from "@testing-library/react";
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MockedProvider } from "@apollo/client/testing";
 import { Provider } from "react-redux";
@@ -232,20 +236,14 @@ describe("FacilityFormContainer", () => {
   });
 
   it("redirects on successful save", async () => {
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      await userEvent.click(screen.getByRole("button"));
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      expect(await screen.findByText("Redirected")).toBeDefined();
-    });
+    await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
+    userEvent.click(screen.getByRole("button"));
+    expect(await screen.findByText("Redirected")).toBeDefined();
   });
 
   it("tracks custom telemetry event on successful save", async () => {
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      await userEvent.click(screen.getByRole("button"));
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      expect(trackEventMock).toBeCalledWith({ name: "Save Settings" });
-    });
+    await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
+    userEvent.click(screen.getByRole("button"));
+    expect(trackEventMock).toBeCalledWith({ name: "Save Settings" });
   });
 });