Testing with Apollo Client

ErrorProvider.jsx

import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
import { ApolloLink, Observable } from 'apollo-link';
import React from 'react';

const ErrorProvider = ({ errors, children }) => {
  const errorLink = new ApolloLink(
    () =>
      new Observable(observer => {
        observer.next({ errors });
        observer.complete();
      }),
  );

  const client = new ApolloClient({
    link: errorLink,
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default ErrorProvider;

Hello.jsx

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
import React from 'react';

export default function Hello() {
  const { loading, error, data } = useQuery(gql`
  query {
    hello
  }
  `);                               
  if (loading) {
    return 'Loading...'; 
  }
  if (error) {
    return error.message; 
  }                                       
  return <h1>{data.hello}</h1>;
};

Hello.test.jsx

import { render, wait } from '@testing-library/react';
import React from 'react';
import ErrorProvider from './ErrorProvider';
import Hello from './Hello';
import LoadingProvider from './LoadingProvider';
import SchemaProvider from './SchemaProvider';

const typeDefs = `
type Query {
  hello: String!
}
`;
                            
test('Renders the Hello component', async () => {
  const { getByText } = render(
    <SchemaProvider typeDefs={typeDefs} queryResolvers={{
      hello: () => 'Hello from the schema provider!',  
    }}>
      <Hello />
    </SchemaProvider>
  );
    
  await wait();
    
  expect(getByText('Hello from the schema provider!')).toBeDefined();
});
  
test('Renders the loading state', () => {
  const { getByText } = render(
    <LoadingProvider>
      <Hello />
    </LoadingProvider>
  );
  
  expect(getByText('Loading...')).toBeDefined();
});
  
test('Renders the error state', async () => {
  const { getByText } = render(
    <ErrorProvider errors={ [ { message: 'Something went wrong' } ] }>
      <Hello />
    </ErrorProvider>
  );
  
  await wait();
  
  expect(getByText('GraphQL error: Something went wrong')).toBeDefined();
});

LoadingProvider.jsx

import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
import { ApolloLink, Observable } from 'apollo-link';
import React from 'react';

const LoadingProvider = ({ children }) => {
  const loadingLink = new ApolloLink(
    () => new Observable(() => {}),
  );

  const client = new ApolloClient({
    link: loadingLink,
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default LoadingProvider;

SchemaProvider.jsx

import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
import SchemaLink from 'apollo-link-schema';
import { addMockFunctionsToSchema, makeExecutableSchema } from 'graphql-tools';
import React from 'react';

const SchemaProvider = ({
  children,
  typeDefs,
  queryResolvers = {},
  mutationResolvers = {},
  subscriptionResolvers = {},
}) => {
  const schema = makeExecutableSchema({
    typeDefs,
    resolverValidationOptions: {
      // See: https://github.com/apollographql/apollo-server/issues/1075
      requireResolversForResolveType: false,
    },
  });
  
  const mocks = {
    Query: () => queryResolvers,
    Mutation: () => mutationResolvers,
    Subscription: () => subscriptionResolvers,
  };
  
  addMockFunctionsToSchema({ schema, mocks });

  const client = new ApolloClient({
    link: new SchemaLink({ schema }),
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default SchemaProvider;