项目作者: benawad

项目描述 :
Automatically mock GraphQL data with a mocked ApolloProvider
高级语言: TypeScript
项目地址: git://github.com/benawad/apollo-mocked-provider.git
创建时间: 2019-06-14T00:48:25Z
项目社区:https://github.com/benawad/apollo-mocked-provider

开源协议:MIT License

下载


apollo-mocked-provider

Automatically mock GraphQL data with a mocked ApolloProvider

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

Table of Contents

install

  1. yarn add apollo-mocked-provider

setup

  1. import {
  2. createApolloErrorProvider,
  3. createApolloMockedProvider,
  4. createApolloLoadingProvider,
  5. } from 'apollo-mocked-provider';
  6. import { typeDefs } from './typeDefs';
  7. export const ApolloMockedProvider = createApolloMockedProvider(typeDefs);
  8. export const ApolloErrorProvider = createApolloErrorProvider();
  9. export const ApolloLoadingProvider = createApolloLoadingProvider();

You can get the typeDefs with this helper file

  1. // downloadTypeDefs.js
  2. const { fetchTypeDefs } = require('apollo-mocked-provider');
  3. (() => {
  4. fetchTypeDefs({ uri: 'http://localhost:4000/graphql' });
  5. })();

Then run that file

  1. node downloadTypeDefs.js

testing

  1. import React from 'react';
  2. import { render, cleanup } from '@testing-library/react';
  3. import { Todos } from './Todos';
  4. import {
  5. ApolloLoadingProvider,
  6. ApolloErrorProvider,
  7. ApolloMockedProvider,
  8. } from './test-utils/providers';
  9. afterEach(cleanup);
  10. test('TodoForm', async () => {
  11. const { debug } = render(
  12. <ApolloMockedProvider>
  13. <Todos ></Todos>
  14. </ApolloMockedProvider>
  15. );
  16. debug();
  17. await Promise.resolve();
  18. debug();
  19. });

Loading:

  1. import React from 'react';
  2. import { render, cleanup } from '@testing-library/react';
  3. import { Todos } from './Todos';
  4. import {
  5. ApolloLoadingProvider,
  6. ApolloErrorProvider,
  7. ApolloMockedProvider,
  8. } from './test-utils/providers';
  9. afterEach(cleanup);
  10. test('TodoForm', async () => {
  11. const { debug } = render(
  12. <ApolloLoadingProvider>
  13. <Todos ></Todos>
  14. </ApolloLoadingProvider>
  15. );
  16. debug();
  17. });

Error:

  1. import React from 'react';
  2. import { render, cleanup } from '@testing-library/react';
  3. import { Todos } from './Todos';
  4. import {
  5. ApolloLoadingProvider,
  6. ApolloErrorProvider,
  7. ApolloMockedProvider,
  8. } from './test-utils/providers';
  9. afterEach(cleanup);
  10. test('TodoForm', async () => {
  11. const { debug } = render(
  12. <ApolloErrorProvider graphQLErrors={[{ message: 'something went wrong' }]}>
  13. <Todos ></Todos>
  14. </ApolloErrorProvider>
  15. );
  16. debug();
  17. await Promise.resolve();
  18. debug();
  19. });

Custom mocks:

  1. import React from 'react';
  2. import { render, cleanup } from '@testing-library/react';
  3. import { Todos } from './Todos';
  4. import {
  5. ApolloLoadingProvider,
  6. ApolloErrorProvider,
  7. ApolloMockedProvider,
  8. } from './test-utils/providers';
  9. afterEach(cleanup);
  10. test('TodoForm', async () => {
  11. const { debug } = render(
  12. <ApolloMockedProvider
  13. customResolvers={{
  14. Query: () => ({
  15. todos: () => [{ id: 1, type: 'hello from custom mocked data' }],
  16. }),
  17. }}
  18. >
  19. <Todos ></Todos>
  20. </ApolloMockedProvider>
  21. );
  22. debug();
  23. await Promise.resolve();
  24. debug();
  25. });

Custom mocks mixed with errors (if you need to have some resolver succeed and then some others throw errors):

  1. <MockedProvider
  2. customResolvers={{
  3. Query: () => ({
  4. todo: (_obj: any, args: any) => {
  5. console.log(args.id)
  6. throw new Error('Boom');
  7. },
  8. todos: () => [
  9. {
  10. text: 'Success',
  11. },
  12. ],
  13. }),
  14. }}
  15. >

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.

  1. import { InMemoryCache } from 'apollo-boost';
  2. // global, shared cache
  3. const globalCache = new InMemoryCache();
  4. export const ApolloMockedProvider = createApolloMockedProvider(
  5. typeDefs,
  6. globalCache
  7. );
  8. test('local cache', async () => {
  9. // local, scoped cache
  10. const localCache = new InMemoryCache();
  11. const { debug } = render(
  12. <ApolloMockedProvider cache={localCache}>
  13. <Todos ></Todos>
  14. </ApolloMockedProvider>
  15. );
  16. });

If you would like to provide custom links in the chain of the mocked provider, you can pass them in the creation function.

  1. export const ApolloMockedProvider = createApolloMockedProvider(typeDefs, {
  2. links: ({ cache, schema }) => [
  3. myLinkFromCache(cache),
  4. myLinkFromSchema(schema),
  5. ],
  6. });

Custom links will be inserted before the terminating link which provides schema mocking.