Mock Apollo Client 使用教程

1. 项目介绍

Mock Apollo Client 是一个开源库，旨在帮助开发者更好地对使用 Apollo Client 的 React 组件进行单元测试。Apollo Client 是一个功能丰富的缓存GraphQL客户端，允许你通过网络请求来管理本地数据。然而，在进行单元测试时，Apollo Client 提供的 MockedProvider 组件在控制测试环境方面存在一些限制。Mock Apollo Client 通过提供更细粒度的控制和对查询/突变结果的模拟，解决了这些问题。

2. 项目快速启动

首先，你需要将 Mock Apollo Client 添加到你的项目中：

npm install --save-dev mock-apollo-client

以下是一个简单的示例，演示如何使用 Mock Apollo Client 来模拟一个查询：

// dog.tsx
import { gql, useQuery } from '@apollo/client';
import React from 'react';

export const GET_DOG_QUERY = gql`
  query getDog($name: String) {
    dog(name: $name) {
      id
      name
      breed
    }
  }
`;

export const Dog: React.FunctionComponent<{ name: string }> = ({ name }) => {
  const { loading, error, data } = useQuery(GET_DOG_QUERY, { variables: { name } });
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <p>{data.dog.name} is a {data.dog.breed}</p>
  );
};

接下来是测试代码：

// dog.test.tsx
import { ApolloProvider } from '@apollo/client';
import { mount, ReactWrapper } from 'enzyme';
import { createMockClient } from 'mock-apollo-client';
import React from 'react';
import { GET_DOG_QUERY, Dog } from './dog';

let wrapper: ReactWrapper;

beforeEach(() => {
  const mockClient = createMockClient();
  mockClient.setRequestHandler(GET_DOG_QUERY, () => Promise.resolve({
    data: {
      dog: {
        id: 1,
        name: 'Rufus',
        breed: 'Poodle'
      }
    }
  }));

  wrapper = mount(
    <ApolloProvider client={mockClient}>
      <Dog name="Rufus" />
    </ApolloProvider>
  );
});

it('renders the dog name and breed', () => {
  expect(wrapper.text()).toContain('Rufus is a Poodle');
});

3. 应用案例和最佳实践

使用 Mock Apollo Client，你可以模拟查询和突变，检查它们是否以预期的变量被调用，以及控制加载和错误状态。以下是一些最佳实践：

• 确保你的测试覆盖了不同的状态，包括加载中、成功和错误。
• 使用 jest 的 spy 功能来验证查询和突变是否被正确调用。
• 在测试中模拟真实的响应数据，以便你的组件可以在测试环境中表现得和在生产环境中一样。

4. 典型生态项目

Mock Apollo Client 通常与 Apollo Client 和各种测试框架（如 Jest、Mocha）一起使用，以提供全面的单元测试解决方案。以下是一些典型的生态项目：

• @apollo/client: Apollo Client 是 Mock Apollo Client 的基础，用于在 React 应用中管理 GraphQL 数据。
• jest: Jest 是一个广泛使用的 JavaScript 测试框架，与 Mock Apollo Client 配合得天衣无缝。
• enzyme: Enzyme 是一个用于 React 组件的测试工具，可以与 Mock Apollo Client 一起使用来挂载和测试组件。