Testing graphql query in react error: TypeError: (0 , _client.gql) is not a function

I have this graphql query:

export const LOAD_PLAYERS = gql`
  query GetPlayers {
    players {
      id
      firstname
      lastname
      shortname
      sex
      picture {
        url
      }
      country {
        code
        picture {
          url
        }
      }
      stats {
        rank
        age
        weight
        height
        points
    }
    }
  }
`;

I’m using it in this custom hook and it works just fine:

import { useEffect } from "react";
import { useDispatch ,} from 'react-redux';
import { setPlayers } from "../../redux/slices/playersSlice";
import { LOAD_PLAYERS } from "../../GraphQL/PlayerQueries";
import { useQuery } from "@apollo/client";

export function useFetchPlayers() {
  const dispatch = useDispatch();

  const { error: playersError, loading: playersLoading, data: playersData } = useQuery(LOAD_PLAYERS);

  useEffect(() => {
    if (playersData ) {
      const { players } = playersData;
      dispatch(setPlayers(players));
    }
  }, [playersData]);

  return {
    playersData,
    playersError,
    playersLoading,
  };
}

I tried to write a unit-test to test the custom hook:

import { useFetchPlayers } from "../../GraphQL/api/playersApi";
import { useDispatch } from "react-redux";
import { setPlayers } from "../../redux/slices/playersSlice";
import { useQuery } from "@apollo/client";
import { players } from "../sampleData";

jest.mock("react-redux", () => ({
  useDispatch: jest.fn(),
}));

jest.mock("@apollo/client", () => ({
  useQuery: jest.fn(),
}));

describe("useFetchPlayers", () => {
  it("should dispatch players when data is available", () => {
    const mockDispatch = jest.fn();
    useDispatch.mockReturnValue(mockDispatch);

    useQuery.mockReturnValue({
      error: null,
      loading: false,
      data: { players },
    });
    const { playersData, playersError, playersLoading } = useFetchPlayers();
    

    expect(playersData).toEqual({ players });
    expect(playersError).toBeNull();
    expect(playersLoading).toBe(false);
    expect(mockDispatch).toHaveBeenCalledWith(setPlayers(players));
  });

  it("should handle error when data is not available", () => {
    const mockDispatch = jest.fn();
    useDispatch.mockReturnValue(mockDispatch);

    useQuery.mockReturnValue({
      error: new Error("GraphQL error"),
      loading: false,
      data: null,
    });

    const { playersData, playersError, playersLoading } = useFetchPlayers();

    expect(playersData).toBeNull();
    expect(playersError).toEqual(new Error("GraphQL error"));
    expect(playersLoading).toBe(false);
    expect(mockDispatch).not.toHaveBeenCalledWith(
      setPlayers(expect.any(Array))
    );
  });

  it("should handle loading state", () => {
    const mockDispatch = jest.fn();
    useDispatch.mockReturnValue(mockDispatch);

    useQuery.mockReturnValue({
      error: null,
      loading: true,
      data: null,
    });

    const { playersData, playersError, playersLoading } = useFetchPlayers();

    expect(playersData).toBeNull();
    expect(playersError).toBeNull();
    expect(playersLoading).toBe(true);
    expect(mockDispatch).not.toHaveBeenCalledWith(
      setPlayers(expect.any(Array))
    );
  });
});

The test throws this error:

FAIL  src/tests/queries/playerQueries.test.js
  ● Test suite failed to run

    TypeError: (0 , _client.gql) is not a function

      1 | import { gql } from "@apollo/client";
      2 |
    > 3 | export const LOAD_PLAYERS = gql`
        |                                 ^
      4 |   query GetPlayers {
      5 |     players {
      6 |       id

      at Object.<anonymous> (src/GraphQL/PlayerQueries.tsx:3:33)
      at Object.<anonymous> (src/GraphQL/api/playersApi.ts:4:1)
      at Object.<anonymous> (src/tests/queries/playerQueries.test.js:90:1)

Given that the query works fine in the app. I’m not sure what’s wrong.
Someone opened an issue on github regarding this. But none of the answers helped.
I’m using create-react-app so jest comes with it. I didn’t configure anything.