Launch Apollo Studio

Testing

Apollo Client React testing API

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

MockedProvider

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, 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.

Example mocks array

const mocks = [
  {
    request: {
      query: GET_DOG,
      variables: { index: 4 }
    },
    result: {
      data: {
        dog: {
          name: "Douglas"
        }
      }
    }
  },
  {
    request: {
      query: GET_DOG,
      variables: { index: 8 }
    },
    error: new Error("Something went wrong")
  }
]

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.

Edit on GitHub