@apollo/react-testing
This tutorial outlines some of the @apollo/react-testing API reference.
Installation
npm install @apollo/react-testing
MockedProvider
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:
PROP | TYPE | DESCRIPTION |
---|---|---|
mocks? | ReadonlyArray | An array containing a request object and the corresponding response. |
addTypename? | boolean | A boolean indicating whether or not __typename are injected into the documents sent to graphql. This defaults to true. |
defaultOptions? | DefaultOptions | An object containing options to pass directly to the ApolloClient instance. |
cache? | ApolloCache | A 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? | Resolvers | Apollo Client local resolvers |
childProps? | object | Props 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 variables {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.
Example
it("runs the mocked query", () => {
render(
<MockedProvider mocks={mocks}>
<MyQueryComponent />
</MockedProvider>
)
// Run assertions on <MyQueryComponent/>
});
Previous:
@apollo/react-hoc
Next:
Hooks migration guide
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://w3resource.com/apollo-graphql/apollo-react-testing.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics