demonstrate mocking fetching functions in page.test.tsx

frontend/app/page.test.tsx

@@ -1,50 +1,28 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import Page from "./page";
-import { getRequests, postRequests } from "util/fetching";
-import { SWRResponse } from "swr";
+import { backendPost, useBackendGet } from "util/fetching";
+
+const useBackendGetMock = jest.fn(((_endpoint) => {
+	// this is the default mock implementation
+	return {
+		data: { message: "Hello from the backend!" },
+		error: undefined,
+	};
+}) as typeof useBackendGet);
+
+const backendPostMock = jest.fn(); // dont provide a default implementation
 
 // https://jestjs.io/docs/mock-functions
 jest.mock("../util/fetching", () => {
 	const originalModule: object = jest.requireActual("../util/fetching");
 	return {
 		__esModule: true,
 		...originalModule,
-		useBackendGet: <T extends keyof getRequests>(
-			endpoint: T,
-		): SWRResponse<getRequests[T]["response"]> => {
-			switch (endpoint) {
-				case "api/hello":
-					return {
-						data: {
-							message: "Hello from the backend!",
-						},
-						error: undefined,
-						isValidating: false,
-						isLoading: false,
-						mutate: () => Promise.reject(new Error()),
-					};
-			}
-			return {
-				data: undefined,
-				error: new Error(),
-				isValidating: false,
-				isLoading: false,
-				mutate: () => Promise.reject(new Error()),
-			};
-		},
-		backendPost: <T extends keyof postRequests>(
-			endpoint: string,
-			_data: postRequests[T]["request"],
-		): Promise<postRequests[T]["response"]> => {
-			switch (endpoint) {
-				case "api/greeting":
-					return Promise.resolve({
-						message: "this is a message",
-					});
-			}
-			return Promise.reject(new Error());
-		},
-	} as unknown;
+		useBackendGet: ((...args) =>
+			useBackendGetMock(...args)) as typeof useBackendGet,
+		backendPost: ((...args) =>
+			backendPostMock(...args)) as typeof backendPost,
+	};
 });
 
 it("has an h1 that says resume analyser", () => {
@@ -67,8 +45,8 @@ it("displays the correct information from the backend get", () => {
 });
 
 it("displays the correct information from the backend post", async () => {
+	backendPostMock.mockResolvedValueOnce({ message: "this is a message" });
 	render(<Page />);
-	// eslint-disable-next-line @typescript-eslint/require-await
 	await act(async () => {
 		fireEvent.click(
 			screen.getByRole("button", { name: "send post request" }),
@@ -77,4 +55,16 @@ it("displays the correct information from the backend post", async () => {
 	expect(screen.getByTestId("backend-example-post").textContent).toEqual(
 		"this is a message",
 	);
+
+	backendPostMock.mockResolvedValueOnce({
+		message: "this is another message",
+	});
+	await act(async () => {
+		fireEvent.click(
+			screen.getByRole("button", { name: "send post request" }),
+		);
+	});
+	expect(screen.getByTestId("backend-example-post").textContent).toEqual(
+		"this is another message",
+	);
 });