test: remove render from beforeEach, wrap with waitFor

Signed-off-by: rare-magma <[email protected]>
rare-magma · Apr 25, 2024 · 4b26122 · 4b26122
1 parent 5ce6ef3
commit 4b26122
Show file tree

Hide file tree

Showing 17 changed files with 343 additions and 238 deletions.
diff --git 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 = <App />;
 
-  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
@@ -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 = <BudgetPage />;
 
-  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();
+    });
   });
 });