Thanks to visit codestin.com
Credit goes to www.apollographql.com

MockProvider

Apollo Client API reference


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

MockedProvider

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

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

Feedback

Edit on GitHub

Ask Community