nextjs_apollo_client_mock_provider_testing_library_quickstart.ts

1import React from 'react';
2import { render, screen } from '@testing-library/react';
3import { withApolloMockProvider } from 'next-apollo-test';
4import { gql } from '@apollo/client';
5import MyComponent, { MY_QUERY } from './MyComponent';
6
7describe('MyComponent', () => {
8  it('renders loading state then data', async () => {
9    const mocks = [
10      {
11        request: {
12          query: MY_QUERY,
13          variables: { id: '1' },
14        },
15        result: {
16          data: {
17            user: { id: '1', name: 'John Doe' },
18          },
19        },
20      },
21    ];
22
23    const { ApolloMockProvider } = withApolloMockProvider(mocks);
24
25    render(
26      <ApolloMockProvider>
27        <MyComponent id="1" />
28      </ApolloMockProvider>
29    );
30
31    expect(screen.getByText(/loading/i)).toBeInTheDocument();
32
33    const nameElement = await screen.findByText(/John Doe/i);
34    expect(nameElement).toBeInTheDocument();
35  });
36});