MockedProvider support?

[FezVrasta]

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?

[fbartho]

I think MockedProvider should work for this library, as this library works on top of apollo-client

[FezVrasta]

Nope it doesn't. Most likely because of the same reason why this library needs is own provider

[trojanowski]

Instead of MockedProvider you can use MockLink from react-apollo/test-links (I also published it as a separate library: https://www.npmjs.com/package/apollo-link-mock). Example usage:

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { MockLink } from 'apollo-link-mock';
import { ApolloProvider } from 'react-apollo-hooks';

function createClient(mocks) {
  return new ApolloClient({
    cache: new InMemoryCache({ addTypename: false }),
    link : new MockLink(mocks),
  });
}

it('should render', () => {
  const client = createClient(MY_MOCKS);
  const { container } = render(
    <ApolloProvider client={client}>
      <MyComponent />
    </ApolloProvider>
  );

  // ...
});

You can also look at the tests of this library for more examples. There is also https://github.com/trojanowski/react-apollo-hooks-sample-test, but it's unfortunately outdated.

[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?

[rajington]

I was trying to take a stab, ran into some weird issue trying to run the example from the docs:

All tests pass with basic react-apollo: https://codesandbox.io/s/green-bush-8nrg2 All tests pass with @apollo/react-hooks: https://codesandbox.io/s/gallant-merkle-0l9ws Tests fail stuck on loading with react-apollo-hooks: https://codesandbox.io/s/nervous-mayer-1ls2m Tests fail stuck on loading even using apollo-link-mock: https://codesandbox.io/s/optimistic-moon-by139

[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>,
  );
});