我有这个graphql查询：

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
    }
    }
  }
`;

字符串
我在这个自定义钩子中使用它，它工作得很好：

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,
  };
}

型
我试着写一个unit-test来测试自定义钩子：

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

型
测试抛出此错误：

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)

型
鉴于应用程序中的查询工作正常，我不确定出了什么问题。
有人在github上开了一个issue，但没有一个答案有帮助。
我使用的是jest-react-app，所以jest是自带的。我没有配置任何东西。