Testing React components

Running tests against code meant for production has long been a best practice. It provides additional security for the code that's already written and prevents accidental regressions in the future. Components utilizing React Apollo, the React implementation of Apollo Client, are no exception.

Although React Apollo has a lot going on under the hood, the library provides multiple tools for testing that simplify those abstractions and allows complete focus on the component logic. These testing utilities have long been used to test the React Apollo library itself, so they will be supported long-term.

The React Apollo library relies on React's context to pass the ApolloClient instance through the React component tree. In addition, React Apollo makes network requests in order to fetch data. This behavior affects how tests should be written for components that use React Apollo.

This tutorial will explain step-by-step how to test React Apollo code. The following examples use the Jest testing framework, but most concepts should be reusable with other libraries.

Consider the component below, which makes a basic query, and displays its results:

import React from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
// Make sure the query is also exported -- not just the component
export const GET_DOG_QUERY = gql`
  query getDog($name: String) {
    dog(name: $name) {
      id
      name
      breed
    }
  }
`;

export function Dog({ name }) {
  const { loading, error, data } = useQuery(
    GET_DOG_QUERY,
    { variables: { name } }
  );
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <p>
      {data.dog.name} is a {data.dog.breed}
    </p>
  );
}

Given this component, let's try to render it inside a test, just to make sure there are no render errors:

// Broken because it's missing Apollo Client in the context
it('should render without error', () => {
  renderer.create(<Dog name="Buck" />);
});

This test would produce an error because Apollo Client isn't available on the context for the useQuery Hook to consume.

In order to fix this we could wrap the component in an ApolloProvider and pass an instance of Apollo Client to the client prop. However, this will cause the tests to run against an actual backend which makes the tests very unpredictable for the following reasons:

• The server could be down.
• There may be no network connection.
• The results are not guaranteed to be the same for every query.

// Not predictable
it('renders without error', () => {
  renderer.create(
    <ApolloProvider client={client}>
      <Dog name="Buck" />
    </ApolloProvider>,
  );
});

MockedProvider

The @apollo/react-testing package exports a MockedProvider component which simplifies the testing of React components by mocking calls to the GraphQL endpoint. This allows the tests to be run in isolation and provides consistent results on every run by removing the dependence on remote data.

By using this MockedProvider component, it's possible to specify the exact results that should be returned for a certain query using the mocks prop.

Here's an example of a test for the above Dog component using MockedProvider, which shows how to define the mocked response for GET_DOG_QUERY:

// dog.test.js
import { MockedProvider } from '@apollo/react-testing';

// The component AND the query need to be exported
import { GET_DOG_QUERY, Dog } from './dog';
const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    },
    result: {
      data: {
        dog: { id: '1', name: 'Buck', breed: 'bulldog' },
      },
    },
  },
];

it('renders without error', () => {
  renderer.create(
    <MockedProvider mocks={mocks} addTypename={false}>
      <Dog name="Buck" />
    </MockedProvider>,
  );
});

The mocks array takes objects with specific requests and their associated results. When the provider receives a GET_DOG_QUERY with matching variables, it returns the corresponding object from the result key. A result may alternatively be a function returning the object:

const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    },
    result: () => {
      // do something, such as recording that this function has been called
      // ...
      return {
        data: {
          dog: { id: '1', name: 'Buck', breed: 'bulldog' },
        },
      }
    },
  },
];

NB: Your mock request's variables object must exactly match the query variables sent from your component.

addTypename

You may notice the prop being passed to the MockedProvider called addTypename. The reason this is here is because of how Apollo Client normally works. When a request is made with Apollo Client normally, it adds a __typename field to every object type requested. This is to make sure that Apollo Client's cache knows how to normalize and store the response. When we're making our mocks, though, we're importing the raw queries without typenames from the component files.

If we don't disable the adding of typenames to queries, the imported query won't match the query actually being run by the component during our tests.

In short, if queries are lacking __typename, it's important to pass the addTypename={false} prop to the MockedProviders.

Previous: Using Apollo with TypeScript
Next: Mocking new schema capabilities