Refactor fetch API using a wrapper

app/coe/page.tsx

@@ -1,17 +1,14 @@
 import { HistoricalResult } from "@/components/HistoricalResult";
 import { MonthlyResult } from "@/components/MonthlyResult";
 import { API_URL } from "@/config";
+import { fetchApi } from "@/utils/fetchApi";
 import { COEResult } from "@/types";
 
 export const runtime = "edge";
 
 const COEPage = async () => {
-  const fetchHistoricalResult: Promise<COEResult[]> = fetch(
-    `${API_URL}/coe`,
-  ).then((res) => res.json());
-  const fetchMonthlyResult: Promise<COEResult[]> = fetch(
-    `${API_URL}/coe/latest`,
-  ).then((res) => res.json());
+  const fetchHistoricalResult = fetchApi<COEResult[]>(`${API_URL}/coe`);
+  const fetchMonthlyResult = fetchApi<COEResult[]>(`${API_URL}/coe/latest`);
 
   let [historicalResult, monthlyResult] = await Promise.all([
     fetchHistoricalResult,

app/page.tsx

@@ -5,13 +5,12 @@ import { API_URL, BASE_URL, EXCLUSION_LIST } from "@/config";
 import { sortByMake } from "@/lib/sortByMake";
 import type { Car } from "@/types";
 import { WebSite, WithContext } from "schema-dts";
+import { fetchApi } from "@/utils/fetchApi";
 
 export const runtime = "edge";
 
 const Home = async () => {
-  const electricCars: Car[] = await fetch(API_URL, { cache: "no-store" }).then(
-    (res) => res.json(),
-  );
+  const electricCars = await fetchApi<Car[]>(API_URL, { cache: "no-store" });
 
   const totals = new Map();
   electricCars.forEach((car) => {

jest.setup.js

@@ -1 +1,4 @@
 import "@testing-library/jest-dom";
+import fetchMock from "jest-fetch-mock";
+
+fetchMock.enableMocks();

package.json

@@ -45,6 +45,7 @@
     "eslint-config-next": "14.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "postcss": "^8",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",

utils/fetchApi.test.ts

@@ -0,0 +1,16 @@
+import fetch from "jest-fetch-mock";
+import { fetchApi } from "@/utils/fetchApi";
+
+describe("fetchApi", () => {
+  beforeEach(() => fetch.resetMocks());
+
+  it("should return data for a successful API call", async () => {
+    fetch.mockResponseOnce(JSON.stringify({ data: "test" }));
+
+    const url = "https://example.com/api/test";
+    const data = await fetchApi(url);
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(data).toEqual({ data: "test" });
+  });
+});

utils/fetchApi.ts

@@ -0,0 +1,16 @@
+interface Options extends RequestInit {}
+
+export const fetchApi = async <T>(
+  url: string,
+  options: Options = {},
+): Promise<T> => {
+  const response = await fetch(url, options);
+
+  if (!response.ok) {
+    throw new Error(
+      `API call failed: ${response.status} - ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+};