Testing

Apollo Client React testing API

For more guidance on running tests with MockedProvider, see Testing React components.

`MockedProvider`

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

The MockedProvider component is a mocked version of ApolloProvider that doesn't send network requests to your API. Instead, it allows you to specify the exact response payload for a given GraphQL operation. This enables you to test your application's operations without communicating with a server.

Props

Name / Type	Description
`mocks` `ReadonlyArray<MockedResponse>`	An array containing GraphQL operation definitions and their corresponding mocked responses. See Defining mocked responses.
`addTypename` `Boolean`	If `true`, the `MockedProvider` automatically adds the `__typename` field to every object type included in every executed query. Set this to `false` if the responses in your `mocks` array do not include `__typename` fields. See Setting `addTypename`. The default value is `true`.
`defaultOptions` `DefaultOptions`	An object containing options to pass directly to the `MockedProvider`'s `ApolloClient` instance. See Example `defaultOptions` object.
`cache` `ApolloCache<TSerializedCache>`	A custom cache for the `MockedProvider`'s `ApolloClient` instance to use. Useful when you need to define a custom `dataIdFromObject` function for automatic cache updates. By default, `MockedProvider` creates an `InMemoryCache` with default configuration.
`resolvers` `Resolvers`	Deprecated. A collection of local resolvers for the `MockedProvider`'s `ApolloClient` instance to use.
`childProps` `object`	Props to pass down to the `MockedProvider`'s child.
`showWarnings` `boolean`	When a request fails to match a mock, a warning is logged to the console to indicate the mismatch. Set this to `false` to silence these warnings. The default value is `true`.

Example `mocks` array

1
const mocks = [
2
  {
3
    request: {
4
      query: GET_DOG,
5
      variables: { index: 4 }
6
    },
7
    result: {
8
      data: {
9
        dog: {
10
          name: "Douglas"
11
        }
12
      }
13
    }
14
  },
15
  {
16
    request: {
17
      query: GET_DOG,
18
      variables: { index: 8 }
19
    },
20
    error: new Error("Something went wrong")
21
  }
22
]

With the mocks array above:

If the GET_DOG operation is executed with variables { index: 4 }, it returns a dog named Douglas.
If GET_DOG is executed with variables { index: 8 }, it returns an error.