Join us from October 8-10 in New York City to learn the latest tips, trends, and news about GraphQL federation and API platform engineering.Join us for GraphQL Summit 2024 in NYC
Start for Free
You're viewing documentation for a previous version of this software. Switch to the latest stable version.


API reference


npm install @apollo/react-testing


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

The MockedProvider is a test-utility that allows you to create a mocked version of the ApolloProvider that doesn't send out network requests to your API, but rather allows you to specify the exact response payload for a given request.

The <MockedProvider /> component takes the following props:

mocks?ReadonlyArrayAn array containing a request object and the corresponding response.
addTypename?booleanA boolean indicating whether or not __typename are injected into the documents sent to graphql. This defaults to true.
defaultOptions?DefaultOptionsAn object containing options to pass directly to the ApolloClient instance.
cache?ApolloCacheA custom cache object to be used in your test. Defaults to InMemoryCache. Useful when you need to define a custom dataIdFromObject function for automatic cache updates.
resolvers?ResolversApollo Client local resolvers
childProps?objectProps that should be passed down to the child

Here is an example mocks prop shape:

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

The above shows that if the request SOME_QUERY is fired with { first: 4 } that it results in the data in the result object.

If SOME_QUERY is fired with variables { first: 8 } then it results in an error.


it("runs the mocked query", () => {
<MockedProvider mocks={mocks}>
<MyQueryComponent />
// Run assertions on <MyQueryComponent/>
Rate articleRateEdit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy