debug tests: apparently, functions that are already async must *not* …

…be wrapped in act() - even if you await the call to act() and correctly await all the same things inside the callback, the timing for some reason will not work out as required, and it will somehow return before react finishes updates

src/MuffiNet.FrontendReact/ClientApp/src/index.tsx

@@ -1,4 +1,3 @@
-// TODO upgrade react, react-dom, @types/react, @types/react-dom to version 18 (requires upgrade of @testing-library/react - blocked by oidc-react at this time)
 import React from "react"
 import { createRoot } from "react-dom/client"
 import { BrowserRouter } from "react-router-dom"

src/MuffiNet.FrontendReact/ClientApp/src/pages/AuthorizedHome/index.test.tsx

@@ -84,14 +84,10 @@ describe(AuthorizedHome, () => {
 
       const { findByLabelText, findByText } = renderPage()
 
-      await act(async () => {
-        await userEvent.type(await findByLabelText("Description"), "Description")
-        await userEvent.type(await findByLabelText("E-mail"), "[email protected]")
-        await userEvent.type(await findByLabelText("Phone"), "12345678")
-        await userEvent.click(await findByText("Submit"))
-      })
-
-      await findByText("1234"); // TODO find something we can wait for? 
+      await userEvent.type(await findByLabelText("Description"), "Description")
+      await userEvent.type(await findByLabelText("E-mail"), "[email protected]")
+      await userEvent.type(await findByLabelText("Phone"), "12345678")
+      await userEvent.click(await findByText("Submit"))
 
       await waitFor(() =>
         expect(mockedAxios.put).toHaveBeenCalledWith("/api/authorizedexample", {
@@ -204,15 +200,14 @@ describe(AuthorizedHome, () => {
     })
 
     it("uses the right access token", async () => {
-      const { findByText } = renderPage()
-
-      // Wait for component to finish loading to prevent "not wrapped in act" error
-      await findByText(entity.name)
+      renderPage()
 
       const useHubParams = mockedUseHub.mock.calls[0]
       const [_path, _onConnected, connectionOptions] = useHubParams
 
-      expect(connectionOptions.accessTokenFactory()).toEqual("1234")
+      waitFor(() => {
+        expect(connectionOptions.accessTokenFactory()).toEqual("1234")
+      })
     })
   })
 })

src/MuffiNet.FrontendReact/ClientApp/src/pages/Home/index.test.tsx

@@ -74,47 +74,37 @@ describe(Home, () => {
 
       const { getByLabelText, getByText, findAllByRole } = renderPage()
 
-      await findAllByRole("table") // TODO remove this and everything blows up. I have no idea why.
-
-      await act(async () => {
-        await userEvent.type(getByLabelText("Name"), "Name")
-        await userEvent.type(getByLabelText("Description"), "Description")
-        await userEvent.type(getByLabelText("E-mail"), "[email protected]")
-        await userEvent.type(getByLabelText("Phone"), "12345678")
-
-        await userEvent.click(getByText("Submit"))
-
-        await waitFor(() =>
-          expect(mockedAxios.put).toHaveBeenCalledWith("/api/example", {
-            Name: "Name",
-            Description: "Description",
-            Email: "[email protected]",
-            Phone: "12345678",
-          })
-        )
-      })
+      await userEvent.type(getByLabelText("Name"), "Name")
+      await userEvent.type(getByLabelText("Description"), "Description")
+      await userEvent.type(getByLabelText("E-mail"), "[email protected]")
+      await userEvent.type(getByLabelText("Phone"), "12345678")
+
+      await userEvent.click(getByText("Submit"))
+
+      await waitFor(() =>
+        expect(mockedAxios.put).toHaveBeenCalledWith("/api/example", {
+          Name: "Name",
+          Description: "Description",
+          Email: "[email protected]",
+          Phone: "12345678",
+        })
+      )
     })
   })
 
   describe("when clicking remove ", () => {
     it("calls backend to remove", async () => {
       const { findAllByRole } = renderPage()
 
-      await findAllByRole("table") // TODO remove this and everything blows up. I have no idea why.
-
-      await act(async () => {
-        await waitFor(() =>
-          expect(mockedAxios.get).toHaveBeenCalledWith("/api/example/get-all")
-        )
-      })
+      await waitFor(() =>
+        expect(mockedAxios.get).toHaveBeenCalledWith("/api/example/get-all")
+      )
 
       const removeBtn = (await findAllByRole("button", {
         name: /Remove/i,
       }))[0]
 
-      await act(async () => {
-        await userEvent.click(removeBtn)
-      })
+      await userEvent.click(removeBtn)
 
       await waitFor(() =>
         expect(mockedAxios.post).toHaveBeenCalledWith("/api/example", {