MockedProvider causes useQuery to always return "undefined" for data on first render of react component

I’m using MockedProvider to wrap a react component that calls “useQuery” each time it’s rendered.
In a jest test MockedProvider is causing useQuery (used by the component being tested) to always return undefined for the data when the component is first rendered. Subsequent renders has the expected data.

MockedProvider is used with a “mocks” array containing the canned response for the expected gql request.
The gql request is static, does not change regardless of what the component is doing.

When I console log the line of code that calls useQuery, I see that “data” variable is always first “undefined” and then on subsequent renders it has the expected canned data.

How do I make MockedProvider always return the canned response in the “mocks”?
Or if that’s not possible, what should I do?

The component being tested has to have “useQuery” mocked in some way in order to test it, as it uses the data to determine what is rendered.

@rpdev This is normal useQuery behavior. data is undefined while the data is being loaded. This is to allow the component to render while the data is being fetched behind the scenes. You can verify this by checking the loading property of the result. The first render of your component that uses useQuery will have loading set to true, and data set to undefined.

The useQuery tests in the Apollo Client source should help demonstrate how you can test with loading states.