mock-apollo-client

What is mock-apollo-client?

The mock-apollo-client npm package is designed to help developers test their Apollo Client GraphQL queries and mutations by providing a way to mock the responses. This is particularly useful for unit testing and integration testing in a controlled environment without needing to rely on a live GraphQL server.

What are mock-apollo-client's main functionalities?

Mocking Queries

This feature allows you to mock GraphQL queries. The code sample demonstrates how to mock a query using the MockedProvider from @apollo/client/testing. The GET_DOGS query is mocked to return a predefined response.

const { MockedProvider } = require('@apollo/client/testing');
const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

const mocks = [
  {
    request: {
      query: GET_DOGS,
    },
    result: {
      data: {
        dogs: [{ id: '1', breed: 'Bulldog' }],
      },
    },
  },
];

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

<MockedProvider mocks={mocks} addTypename={false}>
  <MyComponent />
</MockedProvider>;

Mocking Mutations

This feature allows you to mock GraphQL mutations. The code sample demonstrates how to mock a mutation using the MockedProvider from @apollo/client/testing. The ADD_DOG mutation is mocked to return a predefined response when called with specific variables.

const { MockedProvider } = require('@apollo/client/testing');
const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

const ADD_DOG = gql`
  mutation AddDog($breed: String!) {
    addDog(breed: $breed) {
      id
      breed
    }
  }
`;

const mocks = [
  {
    request: {
      query: ADD_DOG,
      variables: { breed: 'Bulldog' },
    },
    result: {
      data: {
        addDog: { id: '1', breed: 'Bulldog' },
      },
    },
  },
];

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

<MockedProvider mocks={mocks} addTypename={false}>
  <MyComponent />
</MockedProvider>;

Testing Error States

This feature allows you to test how your components handle error states. The code sample demonstrates how to mock an error response for a query using the MockedProvider from @apollo/client/testing. The GET_DOGS query is mocked to return an error.

const { MockedProvider } = require('@apollo/client/testing');
const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

const mocks = [
  {
    request: {
      query: GET_DOGS,
    },
    error: new Error('An error occurred'),
  },
];

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

<MockedProvider mocks={mocks} addTypename={false}>
  <MyComponent />
</MockedProvider>;

Other packages similar to mock-apollo-client

@graphql-tools/mock

@graphql-tools/mock provides utilities to mock GraphQL schema and resolvers. It is more focused on mocking the entire schema and generating mock data based on the schema definitions, which can be useful for more comprehensive testing scenarios.

graphql-mock

graphql-mock is a lightweight library for mocking GraphQL queries and mutations. It provides a simple API to define mock responses and is suitable for unit testing. It is similar to mock-apollo-client but is not tied to Apollo Client.

msw

msw (Mock Service Worker) is a versatile library for mocking network requests, including GraphQL. It intercepts requests at the network level, making it suitable for end-to-end testing. It provides more flexibility compared to mock-apollo-client, which is specifically designed for Apollo Client.

README

Mock Apollo Client

Helps unit test components which use the Apollo Client.

Installation

$ npm install --save-dev mock-apollo-client

Usage

To document...