Join us for GraphQL Summit, October 10-12 in San Diego. Super Early Bird registration ends soon!
Docs
Try 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, 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

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
Previous
Hooks (experimental)
Next
SSR