From 4b26122a38d8f7ebdb0f94872f449cf83b07a90d Mon Sep 17 00:00:00 2001 From: rare-magma Date: Thu, 25 Apr 2024 21:34:34 +0200 Subject: [PATCH] test: remove render from beforeEach, wrap with waitFor Signed-off-by: rare-magma --- src/App.test.tsx | 31 ++-- src/components/Budget/BudgetPage.test.tsx | 84 +++++---- .../CalculateButton/CalculateButton.test.tsx | 165 ++++++++++-------- src/components/Chart/Chart.test.tsx | 4 +- src/components/Chart/ChartTooltip.test.tsx | 9 +- src/components/ChartsPage/ChartsPage.test.tsx | 6 +- src/components/ErrorModal/ErrorModal.test.tsx | 27 ++- .../ItemForm/ItemFormGroup.test.tsx | 57 +++--- .../LandingPage/LandingPage.test.tsx | 6 +- src/components/Loading/Loading.test.tsx | 6 +- src/components/NavBar/NavBar.test.tsx | 58 +++--- .../Notification/Notification.test.tsx | 8 +- src/components/StatCard/StatCard.test.tsx | 38 ++-- src/components/TableCard/TableCard.test.tsx | 52 +++--- src/context/BudgetContext.test.tsx | 8 +- src/context/ConfigContext.test.tsx | 10 +- src/context/GeneralContext.test.tsx | 12 +- 17 files changed, 343 insertions(+), 238 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 66ff106..f31db5f 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,4 +1,4 @@ -import { act, cleanup, render, screen } from "@testing-library/react"; +import { act, cleanup, render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import App from "./App"; import { budgetsDB, calcHistDB, optionsDB } from "./db"; @@ -11,10 +11,6 @@ import { describe("App", () => { const comp = ; - beforeEach(() => { - render(comp); - }); - it("renders initial state", async () => { cleanup(); budgetContextSpy.mockReturnValue(testEmptyBudgetContext); @@ -35,6 +31,7 @@ describe("App", () => { }); it("shows new budget when clicking new button", async () => { + render(comp); const newButton = screen.getAllByRole("button", { name: "new budget" }); await userEvent.click(newButton[0]); expect(screen.getByLabelText("delete budget")).toBeInTheDocument(); @@ -46,22 +43,26 @@ describe("App", () => { }); it("deletes budget when clicking delete button", async () => { + render(comp); await act(async () => { await expect(budgetsDB.getItem(testBudget.id)).resolves.toEqual( testBudget, ); }); - const newButton = screen.getAllByRole("button", { name: "new budget" }); - await userEvent.click(newButton[0]); - await screen - .findAllByRole("button", { - name: "delete budget", - }) - .then((e) => userEvent.click(e[0])); - await userEvent.click( - screen.getByRole("button", { name: /confirm budget deletion/i }), - ); + await waitFor(async () => { + const newButton = screen.getAllByRole("button", { name: "new budget" }); + await userEvent.click(newButton[0]); + await screen + .findAllByRole("button", { + name: "delete budget", + }) + .then((e) => userEvent.click(e[0])); + + await userEvent.click( + screen.getByRole("button", { name: /confirm budget deletion/i }), + ); + }); await act(async () => { await expect(budgetsDB.getItem(testBudget.id)).resolves.toBeNull(); diff --git a/src/components/Budget/BudgetPage.test.tsx b/src/components/Budget/BudgetPage.test.tsx index a6044df..951ed65 100644 --- a/src/components/Budget/BudgetPage.test.tsx +++ b/src/components/Budget/BudgetPage.test.tsx @@ -1,4 +1,4 @@ -import { act, cleanup, render, screen } from "@testing-library/react"; +import { cleanup, render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { budgetsDB } from "../../db"; import { @@ -16,84 +16,102 @@ import { BudgetPage } from "./BudgetPage"; describe("BudgetPage", () => { const comp = ; - beforeEach(() => { - render(comp); - }); - it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", async () => { + render(comp); const newButton = screen.getAllByRole("button", { name: "new budget" }); await userEvent.click(newButton[0]); expect(screen.getByLabelText("delete budget")).toBeInTheDocument(); }); it("responds to new budget keyboard shortcut", async () => { - await userEvent.type(screen.getByTestId("header"), "a"); + render(comp); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "a"); + }); expect(setBudgetMock).toHaveBeenCalled(); }); it("removes budget when clicking on delete budget button", async () => { - await act(async () => { + render(comp); + await waitFor(async () => { await expect(budgetsDB.getItem(testBudget.id)).resolves.toEqual( testBudget, ); + const deleteButton = screen.getAllByRole("button", { + name: "delete budget", + }); + await userEvent.click(deleteButton[0]); + await userEvent.click( + screen.getByRole("button", { name: "confirm budget deletion" }), + ); + await expect(budgetsDB.getItem(testBudget.id)).resolves.toBeNull(); }); - const deleteButton = screen.getAllByRole("button", { - name: "delete budget", - }); - await userEvent.click(deleteButton[0]); - await userEvent.click( - screen.getByRole("button", { name: "confirm budget deletion" }), - ); - await expect(budgetsDB.getItem(testBudget.id)).resolves.toBeNull(); }); it("clones budget when clicking on clone budget button", async () => { - const newButton = screen.getAllByRole("button", { name: "new budget" }); - await userEvent.click(newButton[0]); + render(comp); + await waitFor(async () => { + const newButton = screen.getAllByRole("button", { name: "new budget" }); + await userEvent.click(newButton[0]); - const cloneButton = screen.getAllByRole("button", { - name: "clone budget", + const cloneButton = screen.getAllByRole("button", { + name: "clone budget", + }); + await userEvent.click(cloneButton[0]); + expect(setBudgetMock).toHaveBeenCalledWith(testBudgetClone, true); }); - await userEvent.click(cloneButton[0]); - expect(setBudgetMock).toHaveBeenCalledWith(testBudgetClone, true); }); it("responds to clone budget keyboard shortcut", async () => { - const newButton = screen.getAllByRole("button", { name: "new budget" }); - await userEvent.click(newButton[0]); + render(comp); + await waitFor(async () => { + const newButton = screen.getAllByRole("button", { name: "new budget" }); + await userEvent.click(newButton[0]); - await userEvent.type(screen.getByTestId("header"), "c"); - expect(setBudgetMock).toHaveBeenCalledWith(testBudgetClone, true); + await userEvent.type(screen.getByTestId("header"), "c"); + expect(setBudgetMock).toHaveBeenCalledWith(testBudgetClone, true); + }); }); it("responds to undo change keyboard shortcut", async () => { cleanup(); budgetContextSpy.mockReturnValue({ ...testBudgetContext, canUndo: true }); render(comp); - await userEvent.type(screen.getByTestId("header"), "u"); - expect(undoMock).toHaveBeenCalled(); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "u"); + expect(undoMock).toHaveBeenCalled(); + }); }); it("responds to redo change keyboard shortcut", async () => { cleanup(); budgetContextSpy.mockReturnValue({ ...testBudgetContext, canRedo: true }); render(comp); - await userEvent.type(screen.getByTestId("header"), "r"); - expect(redoMock).toHaveBeenCalled(); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "r"); + expect(redoMock).toHaveBeenCalled(); + }); }); it("responds to clear notifications keyboard shortcut", async () => { + render(comp); setNotificationsMock.mockClear(); - await userEvent.type(screen.getByTestId("header"), "{Escape}"); - expect(setNotificationsMock).toHaveBeenCalledWith([]); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "{Escape}"); + expect(setNotificationsMock).toHaveBeenCalledWith([]); + }); }); it("responds to show graphs keyboard shortcut", async () => { - await userEvent.type(screen.getByTestId("header"), "i"); - expect(screen.getByRole("status")).toBeInTheDocument(); + render(comp); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "i"); + expect(screen.getByRole("status")).toBeInTheDocument(); + }); }); }); diff --git a/src/components/CalculateButton/CalculateButton.test.tsx b/src/components/CalculateButton/CalculateButton.test.tsx index 354118d..8a11843 100644 --- a/src/components/CalculateButton/CalculateButton.test.tsx +++ b/src/components/CalculateButton/CalculateButton.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { vi } from "vitest"; import { itemForm1 } from "../../setupTests"; @@ -28,10 +28,12 @@ describe("CalculateButton", () => { it("opens popover when clicking the button", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); }); - await userEvent.click(button); expect( screen.getByRole("button", { @@ -50,127 +52,142 @@ describe("CalculateButton", () => { it("closes when clicking the button", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", - }); - await userEvent.click(button); + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); - await userEvent.click(button); + await userEvent.click(button); - const button2 = await screen.findByRole("button", { - name: "select type of operation on item value", - }); + const button2 = await screen.findByRole("button", { + name: "select type of operation on item value", + }); - expect(button2).not.toBeInTheDocument(); + expect(button2).not.toBeInTheDocument(); + }); }); it("closes when pressing Escape key", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", - }); - await userEvent.click(button); - - await userEvent.type(screen.getByLabelText("add"), "{Escape}"); + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); + + await userEvent.type(screen.getByLabelText("add"), "{Escape}"); + const button2 = await screen.findByRole("button", { + name: "select type of operation on item value", + }); - const button2 = await screen.findByRole("button", { - name: "select type of operation on item value", + expect(button2).not.toBeInTheDocument(); }); - - expect(button2).not.toBeInTheDocument(); }); it("calls onCalculate when accepting change > 0", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", - }); - await userEvent.click(button); - const acceptButton = screen.getByRole("button", { - name: "apply change to item value", - }); + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); + const acceptButton = screen.getByRole("button", { + name: "apply change to item value", + }); - await userEvent.type(screen.getByLabelText("add"), "123"); - await userEvent.click(acceptButton); + await userEvent.type(screen.getByLabelText("add"), "123"); + await userEvent.click(acceptButton); + }); expect(onCalculate).toHaveBeenCalledWith(123, "add"); }); it("calls onCalculate when change > 0 and enter is pressed", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); + await userEvent.type(screen.getByLabelText("add"), "123"); + await userEvent.type(screen.getByLabelText("add"), "{enter}"); }); - await userEvent.click(button); - await userEvent.type(screen.getByLabelText("add"), "123"); - await userEvent.type(screen.getByLabelText("add"), "{enter}"); expect(onCalculate).toHaveBeenCalledWith(123, "add"); }); it("calls onCalculate with sub", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", - }); - await userEvent.click(button); - const acceptButton = screen.getByRole("button", { - name: "apply change to item value", - }); + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); + const acceptButton = screen.getByRole("button", { + name: "apply change to item value", + }); - await userEvent.type(screen.getByLabelText("add"), "123"); + await userEvent.type(screen.getByLabelText("add"), "123"); - await userEvent.click(screen.getByLabelText("subtraction")); - await userEvent.click(acceptButton); + await userEvent.click(screen.getByLabelText("subtraction")); + await userEvent.click(acceptButton); + }); expect(onCalculate).toHaveBeenCalledWith(123, "subtract"); }); it("calls onCalculate with multiply", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", - }); - await userEvent.click(button); - const acceptButton = screen.getByRole("button", { - name: "apply change to item value", - }); + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); + const acceptButton = screen.getByRole("button", { + name: "apply change to item value", + }); - await userEvent.type(screen.getByLabelText("add"), "123"); + await userEvent.type(screen.getByLabelText("add"), "123"); - await userEvent.click(screen.getByLabelText("multiplication")); - await userEvent.click(acceptButton); + await userEvent.click(screen.getByLabelText("multiplication")); + await userEvent.click(acceptButton); + }); expect(onCalculate).toHaveBeenCalledWith(123, "multiply"); }); it("calls onCalculate with div", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", - }); - await userEvent.click(button); - const acceptButton = screen.getByRole("button", { - name: "apply change to item value", - }); + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); + const acceptButton = screen.getByRole("button", { + name: "apply change to item value", + }); - await userEvent.type(screen.getByLabelText("add"), "123"); + await userEvent.type(screen.getByLabelText("add"), "123"); - await userEvent.click(screen.getByLabelText("division")); - await userEvent.click(acceptButton); + await userEvent.click(screen.getByLabelText("division")); + await userEvent.click(acceptButton); + }); expect(onCalculate).toHaveBeenCalledWith(123, "divide"); }); it("shows history when clicking button", async () => { render(comp); - const button = screen.getByRole("button", { - name: "select operation type to item value", - }); - await userEvent.click(button); - const historyButton = screen.getByRole("button", { - name: "open operation history", + await waitFor(async () => { + const button = screen.getByRole("button", { + name: "select operation type to item value", + }); + await userEvent.click(button); + const historyButton = screen.getByRole("button", { + name: "open operation history", + }); + await userEvent.click(historyButton); }); - await userEvent.click(historyButton); }); }); diff --git a/src/components/Chart/Chart.test.tsx b/src/components/Chart/Chart.test.tsx index 9f8803c..333137b 100644 --- a/src/components/Chart/Chart.test.tsx +++ b/src/components/Chart/Chart.test.tsx @@ -28,8 +28,6 @@ describe("Chart", () => { unobserve: vi.fn(), disconnect: vi.fn(), })); - - render(comp); }); afterEach(() => { @@ -38,10 +36,12 @@ describe("Chart", () => { }); it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", () => { + render(comp); expect(screen.getByText("chart header")).toBeInTheDocument(); expect(screen.getByText("median revenue")).toBeInTheDocument(); expect(screen.getByDisplayValue("$200")).toBeInTheDocument(); diff --git a/src/components/Chart/ChartTooltip.test.tsx b/src/components/Chart/ChartTooltip.test.tsx index ea62994..52a3be4 100644 --- a/src/components/Chart/ChartTooltip.test.tsx +++ b/src/components/Chart/ChartTooltip.test.tsx @@ -9,18 +9,20 @@ describe("ChartTooltip", () => { payload={[{ name: "name", value: 123, unit: "$" }]} /> ); - beforeEach(() => { - render(comp); - }); it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); + it("renders initial state", () => { + render(comp); expect(screen.getByText("label")).toBeInTheDocument(); expect(screen.getByText("$123.00")).toBeInTheDocument(); }); + it("renders goal with %", () => { + render(comp); render( { }); it("renders 2 legends", () => { + render(comp); render( { unobserve: vi.fn(), disconnect: vi.fn(), })); - - render(comp); }); afterEach(() => { @@ -26,10 +24,12 @@ describe("ChartsPage", () => { }); it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", () => { + render(comp); expect(screen.getByLabelText("go back to budgets")).toBeInTheDocument(); expect(screen.getByText("Revenue vs expenses")).toBeInTheDocument(); expect(screen.getByText("Savings")).toBeInTheDocument(); @@ -39,12 +39,14 @@ describe("ChartsPage", () => { }); it("triggers onShowGraphs when back button is pressed", async () => { + render(comp); await userEvent.click(screen.getByLabelText("go back to budgets")); expect(onShowGraphs).toHaveBeenCalledTimes(1); onShowGraphs.mockClear(); }); it("triggers onShowGraphs when i shortcut is pressed", async () => { + render(comp); await userEvent.type(screen.getByText("Reserves"), "i"); expect(onShowGraphs).toHaveBeenCalledTimes(1); onShowGraphs.mockClear(); diff --git a/src/components/ErrorModal/ErrorModal.test.tsx b/src/components/ErrorModal/ErrorModal.test.tsx index 6779d92..347a531 100644 --- a/src/components/ErrorModal/ErrorModal.test.tsx +++ b/src/components/ErrorModal/ErrorModal.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { generalContextSpy, @@ -13,14 +13,15 @@ describe("ErrorModal", () => { beforeEach(() => { generalContextSpy.mockReturnValue(testJsonErrorGeneralContext); - render(comp); }); it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", () => { + render(comp); expect( screen.getAllByText("Errors found while importing:")[0], ).toBeInTheDocument(); @@ -36,17 +37,25 @@ describe("ErrorModal", () => { generalContextSpy.mockReturnValue(testErrorGeneralContext); render(comp); expect(screen.getByTestId("error-modal")).toBeInTheDocument(); - await userEvent.click(screen.getByTestId("error-modal-dismiss")); + await waitFor(async () => { + await userEvent.click(screen.getByTestId("error-modal-dismiss")); + }); }); it("closes json error when clicking the button", async () => { + render(comp); expect(screen.getByTestId("json-error-close")).toBeInTheDocument(); - await userEvent.click(screen.getByTestId("json-error-close")); + await waitFor(async () => { + await userEvent.click(screen.getByTestId("json-error-close")); + }); }); it("closes json error modal when clicking the button", async () => { + render(comp); expect(screen.getByTestId("json-error-modal")).toBeInTheDocument(); - await userEvent.click(screen.getByTestId("json-error-modal")); + await waitFor(async () => { + await userEvent.click(screen.getByTestId("json-error-modal")); + }); }); it("closes csv error when clicking the button", async () => { @@ -54,7 +63,9 @@ describe("ErrorModal", () => { render(comp); expect(screen.getByTestId("csv-error-close")).toBeInTheDocument(); - await userEvent.click(screen.getByTestId("csv-error-close")); + await waitFor(async () => { + await userEvent.click(screen.getByTestId("csv-error-close")); + }); }); it("closes csv error modal when clicking the button", async () => { @@ -62,6 +73,8 @@ describe("ErrorModal", () => { render(comp); expect(screen.getByTestId("csv-error-modal")).toBeInTheDocument(); - await userEvent.click(screen.getByTestId("csv-error-modal")); + await waitFor(async () => { + await userEvent.click(screen.getByTestId("csv-error-modal")); + }); }); }); diff --git a/src/components/ItemForm/ItemFormGroup.test.tsx b/src/components/ItemForm/ItemFormGroup.test.tsx index 362198a..c4a4b22 100644 --- a/src/components/ItemForm/ItemFormGroup.test.tsx +++ b/src/components/ItemForm/ItemFormGroup.test.tsx @@ -1,4 +1,4 @@ -import { cleanup, render, screen } from "@testing-library/react"; +import { cleanup, render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import React from "react"; import { @@ -21,22 +21,23 @@ describe("ItemFormGroup", () => { /> ); - beforeEach(() => { - render(comp); - }); - it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", async () => { + render(comp); expect(await screen.findByDisplayValue("name1")).toBeInTheDocument(); expect(await screen.findByDisplayValue("$10")).toBeInTheDocument(); }); it("reacts to user changing input", async () => { + render(comp); setBudgetMock.mockClear(); - await userEvent.type(screen.getByDisplayValue("name1"), "change name"); + await waitFor(async () => { + await userEvent.type(screen.getByDisplayValue("name1"), "change name"); + }); expect(screen.getByDisplayValue("name1change name")).toBeInTheDocument(); expect(setBudgetMock).toHaveBeenCalledWith( @@ -52,7 +53,9 @@ describe("ItemFormGroup", () => { setBudgetMock.mockClear(); - await userEvent.type(screen.getByDisplayValue("$10"), "123"); + await waitFor(async () => { + await userEvent.type(screen.getByDisplayValue("$10"), "123"); + }); expect(screen.getByDisplayValue("$123")).toBeInTheDocument(); expect(setBudgetMock).toHaveBeenCalledWith( @@ -73,13 +76,16 @@ describe("ItemFormGroup", () => { }); it("removes item when user clicks delete confirmation button", async () => { + render(comp); setBudgetMock.mockClear(); - await userEvent.click( - screen.getByRole("button", { name: "delete item 1" }), - ); - await userEvent.click( - screen.getByRole("button", { name: "confirm item 1 deletion" }), - ); + await waitFor(async () => { + await userEvent.click( + screen.getByRole("button", { name: "delete item 1" }), + ); + await userEvent.click( + screen.getByRole("button", { name: "confirm item 1 deletion" }), + ); + }); expect(setBudgetMock).toHaveBeenCalledWith( { @@ -96,18 +102,23 @@ describe("ItemFormGroup", () => { }); it("shows tooltip when user hovers over", async () => { - await userEvent.hover(screen.getByDisplayValue("$10")); + render(comp); + await waitFor(async () => { + await userEvent.hover(screen.getByDisplayValue("$10")); + }); expect(await screen.findByText("1% of revenue")).toBeInTheDocument(); }); it("opens popover when clicking the button", async () => { - await userEvent.click( - screen.getByRole("button", { - name: "select operation type to item value", - }), - ); - + render(comp); + await waitFor(async () => { + await userEvent.click( + screen.getByRole("button", { + name: "select operation type to item value", + }), + ); + }); expect( screen.getByLabelText("select type of operation on item value"), ).toBeInTheDocument(); @@ -127,8 +138,10 @@ describe("ItemFormGroup", () => { />, ); - await userEvent.clear(screen.getByDisplayValue("10 €")); - await userEvent.type(screen.getByLabelText("item 1 value"), ",12"); + await waitFor(async () => { + await userEvent.clear(screen.getByDisplayValue("10 €")); + await userEvent.type(screen.getByLabelText("item 1 value"), ",12"); + }); expect(screen.getByDisplayValue("0,12 €")).toBeInTheDocument(); }); diff --git a/src/components/LandingPage/LandingPage.test.tsx b/src/components/LandingPage/LandingPage.test.tsx index 2626691..c95152e 100644 --- a/src/components/LandingPage/LandingPage.test.tsx +++ b/src/components/LandingPage/LandingPage.test.tsx @@ -16,14 +16,15 @@ describe("LandingPage", () => { beforeEach(() => { budgetContextSpy.mockReturnValue(testEmptyBudgetContext); - render(comp); }); it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", () => { + render(comp); expect(screen.getByLabelText("new budget")).toBeInTheDocument(); expect(screen.getByLabelText("import budget")).toBeInTheDocument(); expect( @@ -32,6 +33,7 @@ describe("LandingPage", () => { }); it("triggers new budget", async () => { + render(comp); setBudgetMock.mockClear(); const newButton = screen.getAllByRole("button", { name: "new budget" })[0]; await userEvent.click(newButton); @@ -39,6 +41,7 @@ describe("LandingPage", () => { }); it("triggers upload", async () => { + render(comp); await userEvent.upload( screen.getByTestId("import-form-control-landing-page"), new File([JSON.stringify(testBudget)], "test"), @@ -46,6 +49,7 @@ describe("LandingPage", () => { }); it("opens instructions in new tab", async () => { + render(comp); const instructionsButton = screen.getByLabelText( "open instructions in new tab", ); diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx index d3abae1..9f8476d 100644 --- a/src/components/Loading/Loading.test.tsx +++ b/src/components/Loading/Loading.test.tsx @@ -4,15 +4,13 @@ import { Loading } from "./Loading"; describe("Loading", () => { const comp = ; - beforeEach(() => { - render(comp); - }); - it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", () => { + render(comp); expect(screen.getByRole("status")).toBeInTheDocument(); }); }); diff --git a/src/components/NavBar/NavBar.test.tsx b/src/components/NavBar/NavBar.test.tsx index 90e378e..ffd2780 100644 --- a/src/components/NavBar/NavBar.test.tsx +++ b/src/components/NavBar/NavBar.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { budgetContextSpy, @@ -12,15 +12,13 @@ import { NavBar } from "./NavBar"; describe("NavBar", () => { const comp = ; - beforeEach(() => { - render(comp); - }); - it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", async () => { + render(comp); expect(screen.getByText("2023-03")).toBeInTheDocument(); const newButton = screen.getAllByRole("button", { name: "new budget" }); @@ -34,12 +32,14 @@ describe("NavBar", () => { }); it("triggers event when back/fwd buttons are pressed", async () => { + render(comp); await userEvent.click(screen.getByLabelText("go to older budget")); await userEvent.click(screen.getByLabelText("go to newer budget")); }); it("triggers event when back/fwd shortcuts are pressed", async () => { + render(comp); await userEvent.type(screen.getByTestId("header"), "{pagedown}"); await userEvent.type(screen.getByTestId("header"), "{home}"); @@ -48,23 +48,30 @@ describe("NavBar", () => { }); it("triggers event when clone button is pressed", async () => { + render(comp); setBudgetMock.mockClear(); await userEvent.click(screen.getByLabelText("clone budget")); expect(setBudgetMock).toHaveBeenCalledWith(testBudgetClone, true); }); it("triggers event when import button is pressed", async () => { - await userEvent.click(screen.getByLabelText("import or export budget")); - await userEvent.upload( - screen.getByTestId("import-form-control"), - new File([JSON.stringify(testBudget)], "budget", { - type: "application/json", - }), - ); + render(comp); + await waitFor(async () => { + await userEvent.click(screen.getByLabelText("import or export budget")); + await userEvent.upload( + screen.getByTestId("import-form-control"), + new File([JSON.stringify(testBudget)], "budget", { + type: "application/json", + }), + ); + }); }); it("triggers event when export shortcuts are pressed", async () => { - await userEvent.type(screen.getByTestId("header"), "o"); + render(comp); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "o"); + }); expect( screen.getByRole("button", { name: /import budget/i, @@ -81,13 +88,18 @@ describe("NavBar", () => { }), ).toBeInTheDocument(); - await userEvent.type(screen.getByTestId("header"), "s"); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "s"); - await userEvent.type(screen.getByTestId("header"), "d"); + await userEvent.type(screen.getByTestId("header"), "d"); + }); }); it("triggers event when settings shortcuts are pressed", async () => { - await userEvent.type(screen.getByTestId("header"), "t"); + render(comp); + await waitFor(async () => { + await userEvent.type(screen.getByTestId("header"), "t"); + }); expect( screen.getByRole("link", { name: /open guitos changelog/i, @@ -96,6 +108,7 @@ describe("NavBar", () => { }); it("triggers event when user changes budget name input", async () => { + render(comp); setBudgetMock.mockClear(); await userEvent.type(screen.getByDisplayValue("2023-03"), "change name"); @@ -107,13 +120,18 @@ describe("NavBar", () => { }); it("triggers event when user clicks delete budget button", async () => { - await userEvent.click(screen.getByLabelText("delete budget")); - await userEvent.click( - screen.getByRole("button", { name: "confirm budget deletion" }), - ); + render(comp); + + await waitFor(async () => { + await userEvent.click(screen.getByLabelText("delete budget")); + await userEvent.click( + screen.getByRole("button", { name: "confirm budget deletion" }), + ); + }); }); it("opens instructions in new tab", async () => { + render(comp); const instructionsButton = screen.getByLabelText( "open instructions in new tab", ); diff --git a/src/components/Notification/Notification.test.tsx b/src/components/Notification/Notification.test.tsx index 024164c..aaf4783 100644 --- a/src/components/Notification/Notification.test.tsx +++ b/src/components/Notification/Notification.test.tsx @@ -14,19 +14,18 @@ describe("Notification", () => { const comp = ; - beforeEach(() => { - render(comp); - }); - it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", () => { + render(comp); expect(screen.getByText("notification body")).toBeInTheDocument(); }); it("closes when close button is clicked", async () => { + render(comp); setNotificationsMock.mockClear(); await userEvent.click( screen.getByRole("button", { @@ -37,6 +36,7 @@ describe("Notification", () => { }); it("closes when undo button is clicked", async () => { + render(comp); undoMock.mockClear(); await userEvent.click( screen.getByRole("button", { diff --git a/src/components/StatCard/StatCard.test.tsx b/src/components/StatCard/StatCard.test.tsx index edf4412..804f6b4 100644 --- a/src/components/StatCard/StatCard.test.tsx +++ b/src/components/StatCard/StatCard.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { vi } from "vitest"; import { setBudgetMock, testBudget } from "../../setupTests"; @@ -8,15 +8,13 @@ describe("StatCard", () => { const onShowGraphs = vi.fn(); const comp = ; - beforeEach(() => { - render(comp); - }); - it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial state", () => { + render(comp); expect(screen.getByText("Statistics")).toBeInTheDocument(); expect(screen.getByDisplayValue("$90")).toBeInTheDocument(); expect(screen.getByDisplayValue("$80")).toBeInTheDocument(); @@ -25,8 +23,11 @@ describe("StatCard", () => { }); it("triggers onChange when user changes input", async () => { + render(comp); setBudgetMock.mockClear(); - await userEvent.type(screen.getByLabelText("reserves"), "2"); + await waitFor(async () => { + await userEvent.type(screen.getByLabelText("reserves"), "2"); + }); expect(setBudgetMock).toHaveBeenCalledWith( { ...testBudget, stats: { ...testBudget.stats, reserves: 2 } }, @@ -34,8 +35,10 @@ describe("StatCard", () => { ); expect(screen.getByDisplayValue("$2")).toBeInTheDocument(); - await userEvent.clear(screen.getByTestId("goal-input")); - await userEvent.type(screen.getByTestId("goal-input"), "95"); + await waitFor(async () => { + await userEvent.clear(screen.getByTestId("goal-input")); + await userEvent.type(screen.getByTestId("goal-input"), "95"); + }); expect(setBudgetMock).toHaveBeenCalledWith( { ...testBudget, @@ -48,10 +51,13 @@ describe("StatCard", () => { }); it("triggers onAutoGoal when user clicks button", async () => { + render(comp); setBudgetMock.mockClear(); - await userEvent.click( - screen.getByRole("button", { name: "calculate savings goal" }), - ); + await waitFor(async () => { + await userEvent.click( + screen.getByRole("button", { name: "calculate savings goal" }), + ); + }); expect(setBudgetMock).toHaveBeenCalledWith( { ...testBudget, @@ -62,9 +68,13 @@ describe("StatCard", () => { }); it("triggers onShowGraphs when user clicks button", async () => { - await userEvent.click( - screen.getByRole("button", { name: "open charts view" }), - ); + render(comp); + + await waitFor(async () => { + await userEvent.click( + screen.getByRole("button", { name: "open charts view" }), + ); + }); expect(onShowGraphs).toHaveBeenCalledTimes(1); }); diff --git a/src/components/TableCard/TableCard.test.tsx b/src/components/TableCard/TableCard.test.tsx index bee0bfa..a9d8590 100644 --- a/src/components/TableCard/TableCard.test.tsx +++ b/src/components/TableCard/TableCard.test.tsx @@ -1,4 +1,4 @@ -import { cleanup, render, screen } from "@testing-library/react"; +import { cleanup, render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { setBudgetMock, testBudget } from "../../setupTests"; import { TableCard } from "./TableCard"; @@ -6,15 +6,12 @@ import { TableCard } from "./TableCard"; describe("TableCard", () => { const comp = ; - beforeEach(() => { - setBudgetMock.mockClear(); - render(comp); - }); - it("matches snapshot", () => { + render(comp); expect(comp).toMatchSnapshot(); }); it("renders initial Expenses state", async () => { + render(comp); expect(await screen.findByDisplayValue("expense1")).toBeInTheDocument(); expect(screen.getByDisplayValue("$10")).toBeInTheDocument(); }); @@ -26,8 +23,10 @@ describe("TableCard", () => { }); it("responds when user changes input", async () => { - await userEvent.type(screen.getByDisplayValue("expense1"), "change name"); - + render(comp); + await waitFor(async () => { + await userEvent.type(screen.getByDisplayValue("expense1"), "change name"); + }); expect(screen.getByDisplayValue("expense1change name")).toBeInTheDocument(); expect(setBudgetMock).toHaveBeenCalledWith( @@ -42,7 +41,9 @@ describe("TableCard", () => { ); setBudgetMock.mockClear(); - await userEvent.type(screen.getByDisplayValue("$10"), "123"); + await waitFor(async () => { + await userEvent.type(screen.getByDisplayValue("$10"), "123"); + }); expect(screen.getByDisplayValue("$123")).toBeInTheDocument(); expect(setBudgetMock).toHaveBeenCalledWith( @@ -63,9 +64,12 @@ describe("TableCard", () => { }); it("adds new Expense when user clicks adds new item button", async () => { - await userEvent.click( - screen.getByRole("button", { name: "add item to Expenses" }), - ); + render(comp); + await waitFor(async () => { + await userEvent.click( + screen.getByRole("button", { name: "add item to Expenses" }), + ); + }); expect(screen.getByDisplayValue("$10")).toBeInTheDocument(); expect(setBudgetMock).toHaveBeenCalledWith( { @@ -82,9 +86,11 @@ describe("TableCard", () => { it("adds new Revenue when user clicks adds new item button", async () => { cleanup(); render(); - await userEvent.click( - screen.getByRole("button", { name: "add item to Revenue" }), - ); + await waitFor(async () => { + await userEvent.click( + screen.getByRole("button", { name: "add item to Revenue" }), + ); + }); expect(screen.getByDisplayValue("$100")).toBeInTheDocument(); expect(setBudgetMock).toHaveBeenCalledWith( { @@ -99,13 +105,15 @@ describe("TableCard", () => { }); it("removes item when user clicks delete item button", async () => { - await userEvent.click( - screen.getByRole("button", { name: "delete item 1" }), - ); - await userEvent.click( - screen.getByRole("button", { name: "confirm item 1 deletion" }), - ); - + render(comp); + await waitFor(async () => { + await userEvent.click( + screen.getByRole("button", { name: "delete item 1" }), + ); + await userEvent.click( + screen.getByRole("button", { name: "confirm item 1 deletion" }), + ); + }); expect(setBudgetMock).toHaveBeenCalledWith( { ...testBudget, diff --git a/src/context/BudgetContext.test.tsx b/src/context/BudgetContext.test.tsx index b20f8ac..2de102b 100644 --- a/src/context/BudgetContext.test.tsx +++ b/src/context/BudgetContext.test.tsx @@ -1,4 +1,4 @@ -import { render } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import { testBudget, testBudgetList } from "../setupTests"; import { BudgetProvider, useBudget } from "./BudgetContext"; @@ -14,15 +14,15 @@ function TestComponent() { describe("BudgetProvider", () => { it("provides expected BudgetContext obj to child elements", () => { - const { getByLabelText } = render( + render( , ); - expect(getByLabelText("budget").textContent).toEqual( + expect(screen.getByLabelText("budget").textContent).toEqual( JSON.stringify(testBudget), ); - expect(getByLabelText("budgetList").textContent).toEqual( + expect(screen.getByLabelText("budgetList").textContent).toEqual( JSON.stringify(testBudgetList), ); }); diff --git a/src/context/ConfigContext.test.tsx b/src/context/ConfigContext.test.tsx index 44638ca..f7b0146 100644 --- a/src/context/ConfigContext.test.tsx +++ b/src/context/ConfigContext.test.tsx @@ -1,4 +1,4 @@ -import { render } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import { ConfigProvider, useConfig } from "./ConfigContext"; function TestComponent() { @@ -14,13 +14,13 @@ function TestComponent() { describe("ConfigProvider", () => { it("provides expected ConfigContext obj to child elements", () => { - const { getByLabelText } = render( + render( , ); - expect(getByLabelText("currency").textContent).toEqual("USD"); - expect(getByLabelText("locale").textContent).toEqual("en-US"); - expect(getByLabelText("c").textContent).toEqual("USD"); + expect(screen.getByLabelText("currency").textContent).toEqual("USD"); + expect(screen.getByLabelText("locale").textContent).toEqual("en-US"); + expect(screen.getByLabelText("c").textContent).toEqual("USD"); }); }); diff --git a/src/context/GeneralContext.test.tsx b/src/context/GeneralContext.test.tsx index 97a315a..6789fda 100644 --- a/src/context/GeneralContext.test.tsx +++ b/src/context/GeneralContext.test.tsx @@ -1,4 +1,4 @@ -import { render } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import { generalContextSpy, testErrorGeneralContext } from "../setupTests"; import { GeneralProvider, useGeneralContext } from "./GeneralContext"; @@ -19,14 +19,14 @@ describe("GeneralProvider", () => { generalContextSpy.mockReturnValue(testErrorGeneralContext); }); it("provides expected GeneralContext obj to child elements", () => { - const { getByLabelText } = render( + render( , ); - expect(getByLabelText("error").textContent).toEqual("Thrown error"); - expect(getByLabelText("csv").textContent).toEqual(""); - expect(getByLabelText("json").textContent).toEqual(""); - expect(getByLabelText("showError").textContent).toEqual("true"); + expect(screen.getByLabelText("error").textContent).toEqual("Thrown error"); + expect(screen.getByLabelText("csv").textContent).toEqual(""); + expect(screen.getByLabelText("json").textContent).toEqual(""); + expect(screen.getByLabelText("showError").textContent).toEqual("true"); }); });