How to fix Apollo’s MockedProvider returning empty objects for fragments

If you’re like me, you burned your wheels a little too long trying to figure out why your mocked data was empty in your React unit tests.

In my case, I had a query like this:

query GetSomething($somethingId: UUID!) {
  something(somethingId: $somethingId) {
    ...something
    things {
      ...thing
    }
  }
}
${SomethingFragmentDoc}
${ThingFragmentDoc}

And a unit test like this:

import type {MockedResponse} from '@apollo/client/testing';
import {MockedProvider} from '@apollo/client/testing';
import {act, render} from '@testing-library/react';
import type {PropsWithChildren, ReactElement} from 'react';
import {Component} from './component';
import {GetSomethingDocument, GetSomethingQuery} from './generated';
const TEST_GET_SOMETHING_QUERY: GetSomethingQuery = {
  something: {
    id: 'something-id',
    things: [{
      id: 'thing-id',
    }],
  },
};
const MOCKS: MockedResponse[] = [{
  request: {
    query: GetSomethingDocument,
    variables: {
      somethingId: 'something-id',
    },
  },
  result: {
    data: TEST_GET_SOMETHING_QUERY,
  },
}];
describe('Component', (): void => {
  it(
    'should display Something from Apollo',
    async (): Promise<void> => {…