From 83ad168cfe0f5865c4538e0b9bb98173e0c0a07e Mon Sep 17 00:00:00 2001 From: Hassan Abouelela Date: Thu, 14 Jul 2022 09:12:52 +0400 Subject: Wrap Tests In Act Wrap the tests that were raising warnings in act statements. Signed-off-by: Hassan Abouelela --- src/tests/App.test.tsx | 12 ++++++++---- src/tests/pages/CallbackPage.test.tsx | 21 ++++++++++----------- src/tests/pages/FormPage.test.tsx | 15 ++++++++------- src/tests/pages/LandingPage.test.tsx | 15 ++++++--------- 4 files changed, 32 insertions(+), 31 deletions(-) (limited to 'src') 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(); - expect(container).toBeInTheDocument(); +test("renders app to body", async () => { + await act(async () => { + const {container} = render(); + 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(); + act(() => { + Object.defineProperty(global, "location", {value: mockLocation}); + render(); + }); - 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(, {wrapper: MemoryRouter}); + act(() => { render(, {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(, {wrapper: MemoryRouter}); + act(() => { + Object.defineProperty(forms, "getForm", {value: jest.fn(oldImpl)}); + render(, {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(, {wrapper: MemoryRouter}); - await waitFor(() => { - const headerBar = getByText(/Python Discord Forms/); - expect(headerBar).toBeInTheDocument(); - }); + act(() => { render(, {wrapper: MemoryRouter}); }); + const headerBar = await screen.findByText(/Python Discord Forms/); + expect(headerBar).toBeInTheDocument(); }); -- cgit v1.2.3 From 38a319d5a648978bf81e5a4c9548eab228af9665 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela Date: Thu, 14 Jul 2022 10:32:13 +0400 Subject: Fix Failing jest.spyOn Version 1.2.206 of swc introduces a breaking change which makes jest.spyOn not work with our configuration. The response from the swc maintainer seems like a complete mess, so I won't touch it, and just use something else. See issue 5059 on https://github.com/swc-project/swc/issues Signed-off-by: Hassan Abouelela --- src/tests/pages/LandingPage.test.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/tests/pages/LandingPage.test.tsx b/src/tests/pages/LandingPage.test.tsx index b2a5142..908feed 100644 --- a/src/tests/pages/LandingPage.test.tsx +++ b/src/tests/pages/LandingPage.test.tsx @@ -25,8 +25,12 @@ const testingForm: forms.Form = { submitted_text: null }; +jest.mock("../../api/forms", () => ({ + ...jest.requireActual("../../api/forms"), + getForms: jest.fn(() => Promise.resolve([testingForm])) +})); + test("renders landing page", async () => { - jest.spyOn(forms, "getForms").mockImplementation(() => Promise.resolve([testingForm])); act(() => { render(, {wrapper: MemoryRouter}); }); const headerBar = await screen.findByText(/Python Discord Forms/); expect(headerBar).toBeInTheDocument(); -- cgit v1.2.3