Apollo MockedProvider Immediately Returns Null

Question

I am troubleshooting a failing React unit test that uses TestRenderer from react-test-renderer. My component queries a rest endpoint using GraphQL via the useQuery hook. If I wrap my component with <MockedProvider> and call .toJSON(), it immediately returns null in the snapshot when I follow that up with expect(tree).toMatchSnapshot().

Here is my unit test

import React from 'react';
import TestRenderer from 'react-test-renderer';
import { MockedProvider } from '@apollo/client/testing';
import GuitarList from '..';

it(`should render correctly`, async () => {
    const component = TestRenderer.create(
      <MockedProvider
        mocks={[LIST_GUITARS_MOCK]}
        addTypename={false}
        defaultOptions={{
          watchQuery: { fetchPolicy: 'no-cache' },
          query: { fetchPolicy: 'no-cache' },
        }}
      >
        <GuitarList />,
      </MockedProvider>
    );

    await updateWrapper = async (time = 20) => {
      await act(async () => {
        await new Promise(res => setTimeout(res, time));
      });
    };

    const tree = component.toJSON()
    expect(tree).toMatchSnapshot();
  });
});

This is my query

export const LIST_GUITARS = gql`
  query listGuitars(
    $id: Int!
    $limit: Int!
    $offset: Int!
  ) {
    listGuitars(input: {
      id: $id,
      limit: $limit,
      offset: $offset
    })
      @rest (
        type: "listGuitars",
        endpoint: "listGuitars",
        path: "/guitars/available/ListGuitars",
        method: "POST")
      {
        limit
        count
        offset
        guitars {
          name
          id
          price
          brand
          model
        }
      }
  }
`;

here is my mock

export const LIST_GUITARS_MOCK = {
  request: {
    query: LIST_GUITARS,
    variables: {
      limit: 25,
      offset: 0
    }
  },
  result: {
    data: {
      listGuitars: {
        guitars: [
          {
            name: "Red Guitar",
            id: 1,
            price: 1199,
            brand: "Fender",
            model: "Fender Original 1990"
          },
          {
            name: "Metal Guitar",
            id: 518,
            price: 699,
            brand: "Harley Benton",
            model: "Lefty Baritone 6 String"
          }
        ],
        count: 2,
        limit: 25,
        offset: 0
      }
    }
  }
};

Finally these are the relevant packages and version for the REST configuration for Apollo.

    "@apollo/client": "^3.6.9",
    "apollo-link-debounce": "^3.0.0",
    "apollo-link-rest": "^0.9.0-rc.1",
    "graphql": "14.4.2",
    "qs": "^6.10.3",

Is the problem with the <MockProvider>, query, mock, or package versions?

Apollo MockedProvider Immediately Returns Null

0 Answers0