如何在以查询开头的组件中测试onCompleted、onError或onSuccess

import { render, screen } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { MockedProvider } from '@apollo/client/testing';
import { QUERY_NAME, QueryComponent } from './QueryComponent';

const mocks = [
  {
    request: {
      query: QUERY_NAME,
    },
    result: {
      data: {
        // 模拟查询结果
        // ...
      },
    },
  },
];

describe('QueryComponent', () => {
  it('should call onCompleted when query is completed', async () => {
    render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <QueryComponent />
      </MockedProvider>
    );

    await act(async () => {
      // 等待查询完成
      await new Promise((resolve) => setTimeout(resolve, 0));
    });

    // 验证onCompleted是否被调用
    expect(screen.getByText('onCompleted called')).toBeInTheDocument();
  });

  it('should call onError when query encounters an error', async () => {
    const errorMock = {
      request: {
        query: QUERY_NAME,
      },
      error: new Error('Query error'),
    };

    render(
      <MockedProvider mocks={[errorMock]} addTypename={false}>
        <QueryComponent />
      </MockedProvider>
    );

    await act(async () => {
      // 等待查询完成
      await new Promise((resolve) => setTimeout(resolve, 0));
    });

    // 验证onError是否被调用
    expect(screen.getByText('onError called')).toBeInTheDocument();
  });

  it('should call onSuccess with correct data when query is successful', async () => {
    render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <QueryComponent />
      </MockedProvider>
    );

    await act(async () => {
      // 等待查询完成
      await new Promise((resolve) => setTimeout(resolve, 0));
    });

    // 验证onSuccess是否被调用，并检查返回的数据是否正确
    expect(screen.getByText('onSuccess called')).toBeInTheDocument();
    expect(screen.getByText('Data: ...')).toBeInTheDocument();
  });
});