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

import { gql, useQuery } from "@apollo/client";
import "@testing-library/jest-native/extend-expect";
import { cleanup, render, waitFor } from "@testing-library/react-native";
import React from "react";
import { Text } from "react-native";
import withQueryHandling from "../../src/component/with-query-handling";

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();
	});
});