Wrap Tests In Act

Wrap the tests that were raising warnings in act statements.

Signed-off-by: Hassan Abouelela <[email protected]>

4 files changed, 32 insertions, 31 deletions

diff --git a/src/tests/App.test.tsx b/src/tests/App.test.tsx
index 4765f87..9ee1ec7 100644
--- a/src/tests/App.test.tsx
+++ b/src/tests/App.test.tsx
@@ -1,9 +1,13 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import {act, render, waitFor} from "@testing-library/react";
 
 import App from "../App";
 
-test("renders app to body", () => {
-    const { container } = render(<App />);
-    expect(container).toBeInTheDocument();
+test("renders app to body", async () => {
+    await act(async () => {
+        const {container} = render(<App/>);
+        await waitFor(() => {
+            expect(container).toBeInTheDocument();
+        });
+    });
 });
diff --git a/src/tests/pages/CallbackPage.test.tsx b/src/tests/pages/CallbackPage.test.tsx
index 37fb932..d251772 100644
--- a/src/tests/pages/CallbackPage.test.tsx
+++ b/src/tests/pages/CallbackPage.test.tsx
@@ -1,24 +1,23 @@
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import {act, render} from "@testing-library/react";
 
 import CallbackPage from "../../pages/CallbackPage";
 
-test("callback page sends provided code", async () => {
+test("callback page sends provided code", () => {
     global.opener = {
         postMessage: jest.fn()
     };
 
     const mockLocation = new URL("https://forms.pythondiscord.com/authorize?code=abcde_code&state=abcde_state");
 
-    Object.defineProperty(global, "location", {value: mockLocation});
-
-    render(<CallbackPage/>);
+    act(() => {
+        Object.defineProperty(global, "location", {value: mockLocation});
+        render(<CallbackPage/>);
+    });
 
-    await waitFor(() => {
-        expect(global.opener.postMessage).toBeCalledTimes(1);
-        expect(global.opener.postMessage).toBeCalledWith({
-            code: "abcde_code",
-            state: "abcde_state"
-        });
+    expect(global.opener.postMessage).toBeCalledTimes(1);
+    expect(global.opener.postMessage).toBeCalledWith({
+        code: "abcde_code",
+        state: "abcde_state"
     });
 });
diff --git a/src/tests/pages/FormPage.test.tsx b/src/tests/pages/FormPage.test.tsx
index bd297ec..d5b1999 100644
--- a/src/tests/pages/FormPage.test.tsx
+++ b/src/tests/pages/FormPage.test.tsx
@@ -1,15 +1,15 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import {act, render, screen} from "@testing-library/react";
 
-import { MemoryRouter } from "react-router-dom";
+import {MemoryRouter} from "react-router-dom";
 import FormPage from "../../pages/FormPage/FormPage";
 
 import * as forms from "../../api/forms";
 
 test("renders specific form page with loading bar", () => {
-    const { getByText } = render(<FormPage/>, {wrapper: MemoryRouter});
+    act(() => { render(<FormPage/>, {wrapper: MemoryRouter}); });
     // If we rendered the headerbar we rendered the forms page.
-    const headerBar = getByText(/Loading.../);
+    const headerBar = screen.getByText(/Loading.../);
     expect(headerBar).toBeInTheDocument();
 });
 
@@ -17,9 +17,10 @@ test("renders specific form page with loading bar", () => {
 test.skip("calls api method to load form", () => {
     const oldImpl = forms.getForm;
 
-    Object.defineProperty(forms, "getForm", {value: jest.fn(oldImpl)});
-
-    render(<FormPage/>, {wrapper: MemoryRouter});
+    act(() => {
+        Object.defineProperty(forms, "getForm", {value: jest.fn(oldImpl)});
+        render(<FormPage/>, {wrapper: MemoryRouter});
+    });
 
     expect(forms.getForm).toBeCalled();
 });
diff --git a/src/tests/pages/LandingPage.test.tsx b/src/tests/pages/LandingPage.test.tsx
index 727b922..b2a5142 100644
--- a/src/tests/pages/LandingPage.test.tsx
+++ b/src/tests/pages/LandingPage.test.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import {act, render, screen} from "@testing-library/react";
 
 import LandingPage from "../../pages/LandingPage";
 import * as forms from "../../api/forms";
 
-import { MemoryRouter } from "react-router-dom";
-import { QuestionType } from "../../api/question";
+import {MemoryRouter} from "react-router-dom";
+import {QuestionType} from "../../api/question";
 
 const testingForm: forms.Form = {
     "id": "testing-form",
@@ -27,10 +27,7 @@ const testingForm: forms.Form = {
 
 test("renders landing page", async () => {
     jest.spyOn(forms, "getForms").mockImplementation(() => Promise.resolve([testingForm]));
-
-    const { getByText } = render(<LandingPage/>, {wrapper: MemoryRouter});
-    await waitFor(() => {
-        const headerBar = getByText(/Python Discord Forms/);
-        expect(headerBar).toBeInTheDocument();
-    });
+    act(() => { render(<LandingPage/>, {wrapper: MemoryRouter}); });
+    const headerBar = await screen.findByText(/Python Discord Forms/);
+    expect(headerBar).toBeInTheDocument();
 });