Create with query wrapper

test/component/with-query-handling.test.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { render, cleanup, waitFor } from "@testing-library/react-native";
+import "@testing-library/jest-native/extend-expect";
+import { gql, useQuery } from "@apollo/client";
+import withQueryHandling from "../../component/with-query-handling";
+import { Text } from "react-native";
+
+jest.mock("@apollo/client", () => ({
+	...jest.requireActual("@apollo/client"),
+	useQuery: jest.fn(),
+}));
+
+const MockComponent: React.FC<{ data?: string }> = ({ data }) => (
+	<Text>{data ? data : "No Data"}</Text>
+);
+
+const MOCK_QUERY = gql`
+	query GetMockData {
+		mockData {
+			id
+			name
+			description
+		}
+	}
+`;
+
+describe("withQueryHandling HOC Tests", () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+		cleanup();
+	});
+
+	it("should render loading state initially", async () => {
+		(useQuery as jest.Mock).mockReturnValue({
+			loading: true,
+			error: undefined,
+			data: undefined,
+		});
+		const WrappedComponent = withQueryHandling({
+			WrappedComponent: MockComponent,
+			query: MOCK_QUERY,
+			dataKey: "mockDataKey",
+		});
+		const { getByText } = render(<WrappedComponent />);
+		await waitFor(() => {
+			expect(getByText("Loading...")).toBeTruthy();
+		});
+	});
+
+	it("should render the wrapped component with data", () => {
+		const mockData = { getShots: "shots" };
+		(useQuery as jest.Mock).mockReturnValue({
+			loading: false,
+			error: undefined,
+			data: mockData,
+		});
+		const WrappedComponent = withQueryHandling({
+			WrappedComponent: MockComponent,
+			query: MOCK_QUERY,
+			dataKey: "getShots",
+		});
+		const { getByText } = render(<WrappedComponent />);
+		expect(getByText("shots")).toBeTruthy();
+	});
+});