Docs
Launch GraphOS 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 . This enables you to test your application's operations without communicating with a server.

Props

Name /
Type
Description
mocks

ReadonlyArray<MockedResponse>

An array containing definitions and their corresponding mocked responses. See Defining mocked responses.

addTypename

Boolean

If true, the MockedProvider automatically adds the __typename to every included in every executed . Set this to false if the responses in your mocks array do not include __typename . 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 is executed with { index: 4 }, it returns a dog named Douglas.
  • If GET_DOG is executed with { index: 8 }, it returns an error.

Usage

See Testing React components.

Previous
Preloading
Next
SSR
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company