如何在react-apollo中模拟GraphQL应用程序接口进行离线API调用

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import { gql } from '@apollo/client';
import { ApolloProvider, useQuery } from '@apollo/client';

// 定义GraphQL查询
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`;

// 模拟GraphQL响应数据
const mocks = [
  {
    request: {
      query: GET_USER,
      variables: { id: '1' },
    },
    result: {
      data: {
        user: {
          id: '1',
          name: 'John Doe',
        },
      },
    },
  },
];

// 定义一个组件，使用useQuery钩子进行GraphQL查询
const UserComponent = () => {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: '1' },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return <p>User name: {data.user.name}</p>;
};

// 在测试中使用MockedProvider包装组件
const TestComponent = () => (
  <MockedProvider mocks={mocks} addTypename={false}>
    <UserComponent />
  </MockedProvider>
);

// 渲染测试组件并等待查询结果
test('renders user name', async () => {
  const { getByText } = render(<TestComponent />);
  await waitFor(() => getByText('User name: John Doe'));
});