README
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>
);
});