title	MockProvider
description	Apollo Client API reference

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

MockedProvider

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

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

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.