MockedProvider support?

react-apollo exports react-apollo/test-utils#MockedProvider, I can’t find anything similar for react-apollo-hooks.

I could use

jest.mock('react-apollo-hooks', () => ({
  __esModule: true,
  useQuery: () => ({ data: mockedData, loading: false }),
})

Is this supported or is jest.mock the suggested approach?

[FezVrasta]

Thanks for the reply!

Would it make sense to expose a pre-built MockedProvider that internally makes use of apollo-link-mock and apollo-cache-inmemory so that this library exposes a similar API surface as react-apollo?

[kusmierz]

import React from 'react';
import { ApolloConsumer } from 'react-apollo';
import { MockedProvider, MockedProviderProps } from 'react-apollo/test-utils';
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks';

// this adds react-apollo-hooks support for react-apollo's MockedProvider
const MockedHooksProvider = ({ children, ...props }: MockedProviderProps) => (
  <MockedProvider {...props}>
    <ApolloConsumer>
      {(client) => (
        <ApolloHooksProvider client={client}>
          {children}
        </ApolloHooksProvider>
      )}
    </ApolloConsumer>
  </MockedProvider>
);

export default MockedHooksProvider;

you could also use above’s <MockedHooksProvider /> instead of react-apollo’s <MockedProvider /> as above. Then use <MockedHooksProvider /> in the same way as <MockedProvider />:

it('renders without error', () => {
  renderer.create(
    <MockedHooksProvider mocks={mocks} addTypename={false}>
      <Dog name="Buck" />
    </MockedHooksProvider>,
  );
});