I'm trying to use Apollo Mock Provider but it does not work with components that call async apis

Help
,
1

Currently, it is working by waiting an arbitrary amount of time just to make sure the async functions are executed. Which is not a very reliable solution.

I tried to mock the response with the (newData) field, in a similar way as described here (Testing Apollo: How to test if a mutation was called with MockedProvider?) but it does not seem to support (jest.fn) anymore.

Also, I tried to use jest.useFakeTimers/runAllTimers but also the same.

Any thoughts on this?

Thanks!

2

@ahmad can you explain more about what you would like to do? MockedProvider is just an ApolloProvider abstraction, which means it can be used in combination with other testing tools for verifying async API calls. It’s commonly used with the React Testing Library for example. For examples of this see the useQuery tests.

3

@hwillson I have a component that do multiple API calls when it’s rendered (series of queries and mutations) using client.query/mutation. And when I use the MockedProvider it works fine, however I have to add a settimeout for few seconds after the component is rendered to make sure those queries and mutations are called successfully. The documentation proposes to use await new Promise(resolve => setTimeout(resolve, 0)); as stated in (Testing React components - Apollo GraphQL Docs) but it didn’t work for me.

4

I’d suggest taking a look at the useQuery tests to see how we’re handling this with the @testing-library/react library wait function. If that doesn’t help, please post some example test code, and we’ll try to help more.