@nwt/apollo-mocked-provider

apollo-mocked-provider

Note: this is a temporary fork of https://github.com/benawad/apollo-mocked-provider for my own personal use. Please use/and/or contribute to the upstream.

Automatically mock GraphQL data with a mocked ApolloProvider

Inspiration: https://www.freecodecamp.org/news/a-new-approach-to-mocking-graphql-data-1ef49de3d491/

install

yarn add apollo-mocked-provider

setup

import {
  createApolloErrorProvider,
  createApolloMockedProvider,
  createApolloLoadingProvider,
} from 'apollo-mocked-provider';
import { typeDefs } from './typeDefs';

export const ApolloMockedProvider = createApolloMockedProvider(typeDefs);
export const ApolloErrorProvider = createApolloErrorProvider();
export const ApolloLoadingProvider = createApolloLoadingProvider();

testing

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { Todos } from './Todos';
import {
  ApolloLoadingProvider,
  ApolloErrorProvider,
  ApolloMockedProvider,
} from './test-utils/providers';

afterEach(cleanup);

test('TodoForm', async () => {
  const { debug } = render(
    <ApolloMockedProvider>
      <Todos />
    </ApolloMockedProvider>
  );

  debug();
  await Promise.resolve();
  debug();
});

Loading:

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { Todos } from './Todos';
import {
  ApolloLoadingProvider,
  ApolloErrorProvider,
  ApolloMockedProvider,
} from './test-utils/providers';

afterEach(cleanup);

test('TodoForm', async () => {
  const { debug } = render(
    <ApolloLoadingProvider>
      <Todos />
    </ApolloLoadingProvider>
  );

  debug();
});

Error:

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { Todos } from './Todos';
import {
  ApolloLoadingProvider,
  ApolloErrorProvider,
  ApolloMockedProvider,
} from './test-utils/providers';

afterEach(cleanup);

test('TodoForm', async () => {
  const { debug } = render(
    <ApolloErrorProvider graphQLErrors={[{ message: 'something went wrong' }]}>
      <Todos />
    </ApolloErrorProvider>
  );

  debug();
  await Promise.resolve();
  debug();
});

Custom mocks:

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { Todos } from './Todos';
import {
  ApolloLoadingProvider,
  ApolloErrorProvider,
  ApolloMockedProvider,
} from './test-utils/providers';

afterEach(cleanup);

test('TodoForm', async () => {
  const { debug } = render(
    <ApolloMockedProvider
      customResolvers={{
        Query: () => ({
          todos: () => [{ id: 1, type: 'hello from custom mocked data' }],
        }),
      }}
    >
      <Todos />
    </ApolloMockedProvider>
  );

  debug();
  await Promise.resolve();
  debug();
});

Cache

By default, providers will use a new instance of InMemoryCache, but you can override that at a global or per component level by providing an object that implements ApolloCache to the create* methods or mocked components respectively.

import { InMemoryCache } from 'apollo-boost';

// global, shared cache
const globalCache = new InMemoryCache();
export const ApolloMockedProvider = createApolloMockedProvider(
  typeDefs,
  globalCache
);

test('local cache', async () => {
  // local, scoped cache
  const localCache = new InMemoryCache();
  const { debug } = render(
    <ApolloMockedProvider cache={localCache}>
      <Todos />
    </ApolloMockedProvider>
  );
});