Testing

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

MockedProvider

1import { 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

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

1const 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.

Usage

See Testing React components.