{"library":"mock-apollo-client","title":"Mock Apollo Client for Unit Testing","description":"Mock Apollo Client is a utility library designed to simplify unit testing of React components that interact with GraphQL APIs via `@apollo/client`. The current stable version is 2.x, which is compatible with `@apollo/client` v4.x. Previous major versions (1.x for Apollo Client v3, and 0.x for Apollo Client v2) exist for backward compatibility. The library helps address limitations found in Apollo Client's built-in `MockedProvider`, such as the inability to assert query/mutation variables, track call counts, dynamically change results after initialization, or easily control loading states. It offers a standalone, framework-agnostic mocking solution that provides granular control over GraphQL operations within tests, making it a powerful alternative for scenarios requiring more advanced testing capabilities than `MockedProvider` offers. Release cadence is tied to major `@apollo/client` updates.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install mock-apollo-client"],"cli":null},"imports":["import { createMockClient } from 'mock-apollo-client';","import type { ApolloClient } from '@apollo/client';\nimport { createMockClient } from 'mock-apollo-client';","mockClient.setRequestHandler(GET_DOG_QUERY, () => { /* ... */ });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import '@testing-library/jest-dom';\nimport { ApolloProvider, gql } from '@apollo/client/react';\nimport { render, screen } from '@testing-library/react';\nimport { createMockClient } from 'mock-apollo-client';\n\n// Imagine this is in dog.jsx\nexport const GET_DOG_QUERY = gql`\n  query getDog($name: String) {\n    dog(name: $name) {\n      id\n      name\n      breed\n    }\n  }\n`;\n\n// Imagine this is in dog.jsx\nimport { useQuery } from '@apollo/client/react';\nexport const Dog = ({ name }) => {\n  const { loading, error, data } = useQuery(GET_DOG_QUERY, {\n    variables: { name },\n  });\n  if (loading) return <p>Loading...</p>;\n  if (error) return <p>{error.message}</p>;\n\n  return (\n    <p>\n      {data.dog.name} is a {data.dog.breed}\n    </p>\n  );\n};\n\ndescribe('Dog component', () => {\n  it('renders the dog name and breed', async () => {\n    const mockClient = createMockClient();\n\n    mockClient.setRequestHandler(GET_DOG_QUERY, (variables) => {\n      // Assert variables if needed\n      expect(variables.name).toBe('Rufus');\n      return Promise.resolve({\n        data: { dog: { id: 1, name: 'Rufus', breed: 'Poodle' } },\n      });\n    });\n\n    render(\n      <ApolloProvider client={mockClient}>\n        <Dog name=\"Rufus\" />\n      </ApolloProvider>,\n    );\n\n    expect(await screen.findByText('Rufus is a Poodle')).toBeInTheDocument();\n  });\n});","lang":"typescript","description":"This quickstart demonstrates how to create a mock Apollo client, define a mock response for a specific GraphQL query using `setRequestHandler`, and render a component wrapped in `ApolloProvider` with the mocked client. It also shows basic assertion of query variables and the rendered output.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}