测试 React 组件

使用 MockedProvider 和相关 API

本文介绍了测试使用Apollo 客户端的 React 组件的最佳实践。

以下示例使用Jest 和 React Testing Library，但这些概念适用于任何测试框架。

The`MockedProvider` 组件

每个使用 Apollo 客户端的 React 组件测试都必须在 React 的上下文中提供 Apollo Client。在应用程序代码中，您通过使用 ApolloProvider 组件来达到这个目的。在您的测试中，您使用 MockedProvider 组件来替代。

MockedProvider 组件允许您定义测试中执行的单一查询的模拟响应。这意味着测试不需要与GraphQL服务器进行通信，这消除了外部依赖，从而提高了测试的可靠性。

`示例`

假设我们想测试以下Dog 组件，该组件执行一个基本查询并显示其结果：


dog.jsx
1
import React from "react";
2
import { gql, useQuery } from "@apollo/client";
3

4
// Make sure that both the query and the component are exported
5
export const GET_DOG_QUERY = gql`
6
  query GetDog($name: String) {
7
    dog(name: $name) {
8
      id
9
      name
10
      breed
11
    }
12
  }
13
`;
14

15
export function Dog({ name }) {
16
  const { loading, error, data } = useQuery(GET_DOG_QUERY, {
17
    variables: { name }
18
  });
19
  if (loading) return <p>Loading...</p>;
20
  if (error) return <p>{error.message}</p>;
21
  return (
22
    <p>
23
      {data.dog.name} is a {data.dog.breed}
24
    </p>
25
  );
26
}

该组件的基本渲染测试如下（不包括模拟响应）

dog.test.js

1
import "@testing-library/jest-dom";
2
import { render, screen } from "@testing-library/react";
3
import { MockedProvider } from "@apollo/client/testing";
4
import { GET_DOG_QUERY, Dog } from "./dog";
5

6
const mocks = []; // We'll fill this in next
7

8
it("renders without error", async () => {
9
  render(
10
    <MockedProvider mocks={mocks} addTypename={false}>
11
      <Dog name="Buck" />
12
    </MockedProvider>
13
  );
14
  expect(await screen.findByText("Loading...")).toBeInTheDocument();
15
});

注意：通常，您需要在测试设置文件中导入@testing-library/jest-dom，这提供了一些自定义 Jest 匹配器（例如toBeInTheDocument）。导入包含在这些示例中以保证完整性。

`定义模拟响应`

MockedProvider 的 mocks prop 是一个对象数组，每个对象定义了单个操作的模拟响应。让我们定义一个对于传递了name参数Buck的GET_DOG_QUERY的模拟响应：

dog.test.js

1
const mocks = [
2
  {
3
    request: {
4
      query: GET_DOG_QUERY,
5
      variables: {
6
        name: "Buck"
7
      }
8
    },
9
    result: {
10
      data: {
11
        dog: { id: "1", name: "Buck", breed: "bulldog" }
12
      }
13
    }
14
  }
15
];

每个模拟对象定义了一个请求字段（表示与操作相匹配的形状和变量）和一个结果字段（表示返回操作响应的形状）。

您的测试必须执行一个与模拟的形状完全匹配的操作，并使用相关的模拟响应。

或者，结果字段可以是一个函数，在执行任意逻辑之后返回一个模拟响应：

1
result: (variables) => { // `variables` is optional
2
  // ...arbitrary logic...
3

4
  return {
5
    data: {
6
      dog: { id: '1', name: 'Buck', breed: 'bulldog' },
7
    },
8
  }
9
},

将上述代码相结合，我们得到以下完整的测试


dog.test.js
1
import "@testing-library/jest-dom";
2
import { render, screen } from "@testing-library/react";
3
import { MockedProvider } from "@apollo/client/testing";
4
import { GET_DOG_QUERY, Dog } from "./dog";
5

6
const mocks = [
7
  {
8
    request: {
9
      query: GET_DOG_QUERY,
10
      variables: {
11
        name: "Buck"
12
      }
13
    },
14
    result: {
15
      data: {
16
        dog: { id: "1", name: "Buck", breed: "bulldog" }
17
      }
18
    }
19
  }
20
];
21

22
it("renders without error", async () => {
23
  render(
24
    <MockedProvider mocks={mocks} addTypename={false}>
25
      <Dog name="Buck" />
26
    </MockedProvider>
27
  );
28
  expect(await screen.findByText("Loading...")).toBeInTheDocument();
29
});

`重用模拟`

默认情况下，模拟对象只使用一次。如果您想将模拟对象用于多个操作，可以将 maxUsageCount 字段设置为一个数字，表示模拟对象应使用的次数：


dog.test.js
1
import { GET_DOG_QUERY } from "./dog";
2

3
const mocks = [
4
  {
5
    request: {
6
      query: GET_DOG_QUERY,
7
      variables: {
8
        name: "Buck"
9
      }
10
    },
11
    result: {
12
      data: {
13
        dog: { id: "1", name: "Buck", breed: "bulldog" }
14
      }
15
    },
16
    maxUsageCount: 2, // The mock can be used twice before it's removed, default is 1
17
  }
18
];

传递 Number.POSITIVE_INFINITY 将使模拟对象无限期地重用。

`动态变量`

有时，传递的变量的确切值未知。模拟响应对象采用一个变量匹配器属性，这是一个函数，它接受变量并返回一个布尔值，表示是否应该为此提供的查询匹配此模拟。您不能同时指定此参数和 request.variables。

例如，此模拟将匹配所有狗查询

1
import { MockedResponse } from "@apollo/client/testing";
2

3
const dogMock: MockedResponse<Data, Variables> = {
4
  request: {
5
    query: GET_DOG_QUERY
6
  },
7
  variableMatcher: (variables) => true,
8
  result: {
9
    data: { dog: { id: 1, name: 'Buck', breed: 'poodle' } },
10
  },
11
};

这还可以用于单独断言特定的变量：

1
import { MockedResponse } from "@apollo/client/testing";
2

3
const dogMock: MockedResponse<Data, Variables> = {
4
  request: {
5
    query: GET_DOG_QUERY
6
  },
7
  variableMatcher: jest.fn().mockReturnValue(true),
8
  result: {
9
    data: { dog: { id: 1, name: 'Buck', breed: 'poodle' } },
10
  },
11
};
12

13
expect(variableMatcher).toHaveBeenCalledWith(expect.objectContaining({
14
  name: 'Buck'
15
}));

`设置 addTypename`

在上面的示例中，我们将模拟提供者的 addTypename 属性设置为 false。这可以防止 Apollo 客户端自动将特殊 __typename 字段添加到它查询的每个对象中（它默认这样做以支持缓存中的数据规范化）。

我们不想在测试中将__typename自动添加到GET_DOG_QUERY中，因为这样就不会匹配我们的模拟所期望的查询的形状。

除非您明确配置您的模拟器以期望一个__typename字段，在测试中总是将addTypename设置为false。

`测试“加载”和“成功”状态`

为了测试组件在其查询完成后如何渲染，Testing Library提供了几个findBy方法。有关Testing Library文档：

findBy查询适用于您期望某个元素出现但DOM的变化可能不会立即发生的情况。

我们可以使用异步的screen.findByText方法首先查询包含加载信息的DOM元素，然后查询成功信息"Buck是一条贵宾犬"}（在查询完成后出现）：

1
it("should render dog", async () => {
2
  const dogMock = {
3
    delay: 30 // to prevent React from batching the loading state away
4
    // delay: Infinity // if you only want to test the loading state
5

6
    request: {
7
      query: GET_DOG_QUERY,
8
      variables: { name: "Buck" }
9
    },
10
    result: {
11
      data: { dog: { id: 1, name: "Buck", breed: "poodle" } }
12
    }
13
  };
14
  render(
15
    <MockedProvider mocks={[dogMock]} addTypename={false}>
16
      <Dog name="Buck" />
17
    </MockedProvider>
18
  );
19
  expect(await screen.findByText("Loading...")).toBeInTheDocument();
20
  expect(await screen.findByText("Buck is a poodle")).toBeInTheDocument();
21
});

`测试错误状态`

组件的错误状态与成功状态一样重要，如果不是更重要的话，需要测试。您可以使用MockedProvider组件来模拟网络错误和GraphQL错误。

网络错误是客户端在与您的GraphQL服务器通信时发生错误。
GraphQL错误是在GraphQL服务器解析客户端的操作时发生的错误。

`网络错误`

要模拟网络错误，您可以在测试的模拟对象中包含一个error字段，而不是result字段：

1
it("should show error UI", async () => {
2
  const dogMock = {
3
    request: {
4
      query: GET_DOG_QUERY,
5
      variables: { name: "Buck" }
6
    },
7
    error: new Error("An error occurred")
8
  };
9
  render(
10
    <MockedProvider mocks={[dogMock]} addTypename={false}>
11
      <Dog name="Buck" />
12
    </MockedProvider>
13
  );
14
  expect(await screen.findByText("An error occurred")).toBeInTheDocument();
15
});

在这种情况下，当Dog组件执行其查询时，MockedProvider返回相应的错误。这使我们的Dog组件应用错误状态，使我们能够验证错误被优雅地处理。

`GraphQL错误`

要模拟GraphQL错误，您在模拟的result字段内部定义一个errors字段。此字段的值是一个实例化的GraphQLError对象数组：

1
const dogMock = {
2
  // ...
3
  result: {
4
    errors: [new GraphQLError("Error!")],
5
  },
6
};

因为GraphQL支持在发生错误时返回部分结果，一个模拟对象的result可以包含errors字段和data字段。

`测试突变`

您测试使用 useMutation 的组件，就像您测试使用 useQuery 的组件一样。就像在您的应用程序代码中一样，主要的区别就是您需要调用 mutation's mutate 函数才能真正执行操作。

`示例`

以下 DeleteButton 组件执行 DELETE_DOG_MUTATION 来删除我们图中的名为 Buck 的狗（别担心，Buck 会没事的 🐶)

delete-dog.jsx

1
import React from "react";
2
import { gql, useMutation } from "@apollo/client";
3

4
export const DELETE_DOG_MUTATION = gql`
5
  mutation deleteDog($name: String!) {
6
    deleteDog(name: $name) {
7
      id
8
      name
9
      breed
10
    }
11
  }
12
`;
13

14
export function DeleteButton() {
15
  const [mutate, { loading, error, data }] = useMutation(DELETE_DOG_MUTATION);
16

17
  if (loading) return <p>Loading...</p>;
18
  if (error) return <p>Error!</p>;
19
  if (data) return <p>Deleted!</p>;
20

21
  return (
22
    <button onClick={() => mutate({ variables: { name: "Buck" } })}>
23
      Click to Delete Buck
24
    </button>
25
  );
26
}

我们可以像测试我们的 Dog 组件一样测试这个组件的初始渲染:

delete-dog.test.js

1
import '@testing-library/jest-dom';
2
import userEvent from '@testing-library/user-event';
3
import { render, screen } from '@testing-library/react';
4
import { MockedProvider } from "@apollo/client/testing";
5
import { DeleteButton, DELETE_DOG_MUTATION } from "./delete-dog";
6

7
it("should render without error", () => {
8
  render(
9
    <MockedProvider mocks={[]}>
10
      <DeleteButton />
11
    </MockedProvider>
12
  );
13
});

在上面的测试中，因为 mutate 函数没有被调用，所以 DELETE_DOG_MUTATION 没有被执行。

以下测试通过点击按钮执行了 mutation：

delete-dog.test.js

1
it("should render loading and success states on delete", async () => {
2
  const deleteDog = { name: "Buck", breed: "Poodle", id: 1 };
3
  const mocks = [
4
    {
5
      request: {
6
        query: DELETE_DOG_MUTATION,
7
        variables: { name: "Buck" }
8
      },
9
      result: { data: deleteDog }
10
    }
11
  ];
12

13
  render(
14
    <MockedProvider mocks={mocks} addTypename={false}>
15
      <DeleteButton />
16
    </MockedProvider>
17
  );
18

19
  // Find the button element...
20
  const button = await screen.findByText("Click to Delete Buck");
21
  userEvent.click(button); // Simulate a click and fire the mutation
22

23
  expect(await screen.findByText("Loading...")).toBeInTheDocument();
24
  expect(await screen.findByText("Deleted!")).toBeInTheDocument();
25
});

同样，这个例子与上面基于 useQuery 的组件类似，但在渲染完成后有所不同。因为这个组件依赖于按钮点击来触发 mutation，所以我们使用 Testing Library 的 user-event 库的 click 方法来模拟点击。这触发了 mutation，随后测试照常运行。

请记住，mock 的 result 也可以是一个函数，所以您可以在返回结果之前执行任意逻辑（例如设置一个布尔值以指示 mutation 已完成）。

测试错误状态与测试查询时相同。

`使用缓存进行测试`

如果您的应用程序设置了任何缓存配置选项（如 possibleTypes 或 typePolicies），您应该向 MockedProvider 提供一个设置了相同选项的 InMemoryCache 实例：

1
const cache = new InMemoryCache({
2
  // ...configuration options...
3
})
4

5
<MockedProvider mocks={mocks} cache={cache}>
6
  <DeleteButton />
7
</MockedProvider>,

以下示例在其缓存配置中指定了 possibleTypes 和 typePolicies，这两个都必须在相关测试中指定，以防止意外行为。


1
// "Dog" supertype can be of type "ShibaInu"
2
const ShibaFragment = gql`
3
  fragment ShibaInuFields on Dog {
4
    ... on ShibaInu {
5
      tail {
6
        isCurly
7
      }
8
    }
9
  }
10
`;
11

12
export const GET_DOG_QUERY = gql`
13
  query GetDog($name: String) {
14
    dog(name: $name) {
15
      id
16
      name
17
      breed
18

19
      ...ShibaInuFields
20
    }
21
  }
22

23
  ${ShibaFragment}
24
`;
25

26
export const cache = new ApolloClient({
27
  cache: new InMemoryCache({
28
    possibleTypes: {
29
      Dog: ["ShibaInu"],
30
    },
31
    // suppose you want you key fields for "Dog" to not be simply "id"
32
    typePolicies: {
33
      keyFields: {
34
        Dog: ["name", "breed"],
35
      },
36
    },
37
  }),
38
});

`测试本地状态`

为了正确使用 MockedProvider 测试本地状态，您需要将配置的缓存传递给 MockedProvider 本身。

MockedProvider 在幕后创建自己的 ApolloClient 实例，如下所示：

1
const {
2
  mocks,
3
  addTypename,
4
  defaultOptions,
5
  cache,
6
  resolvers,
7
  link,
8
  showWarnings,
9
} = this.props;
10
const client = new ApolloClient({
11
  cache: cache || new Cache({ addTypename }),
12
  defaultOptions,
13
  link: link || new MockLink(mocks || [], addTypename, { showWarnings }),
14
  resolvers,
15
});

因此，如果您正在使用 Apollo Client 2.x 本地解析器，或者 Apollo Client 3.x 类型/字段策略，您必须通知MockedProvider组件您将对@client 字段做出什么操作。否则，幕后创建的ApolloClient实例不知道如何处理您的测试。

如果您使用 Apollo Client 2.x 本地解析器，请确保将解析器对象传递给MockedProvider:

1
<MockedProvider mocks={mocks} resolvers={resolvers} ...

如果您使用 Apollo Client 3.x 类型/字段策略，请确保将配置的缓存实例（带有您的条目类型策略）传递给MockedProvider:

1
<MockedProvider mocks={mocks} cache={cache} ...

如果您正在使用 Apollo Client 2.x 本地解析器，您还需要传递您的解析器映射：

1
<MockedProvider mocks={mocks} cache={cache} resolvers={resolvers} ...

这是必要的，因为否则，MockedProvider组件不知道如何解析您的查询中的本地字段。

沙箱示例

要查看如何测试组件的实用示例，请查看 CodeSandbox 上的此项目。

使用 TypeScript

基于模式测试