【GraphQL/Apollo/Jest/React】queryのresultのdataがundefinedになる

GraphqlとReactのテストを書いているときに手こずったことを記録します。

問題

MockedProviderで定義しているはずのuseQuery(useLazyQuery)のresultのdataがundefinedになってしまう。

解決方法

fetchPolicyをno-cacheに設定する！

今回、複数のクエリを複数回使用できるような仕様になっており、予期せぬところでキャッシュが動いてたのかなあと思います。

私はwatchQueryの設定を変更することで対応可能でしたが、queryに設定が必要なこともあるかと思うので、状況に合わせて試してみることをお勧めします。

コード例

import { render, screen, waitFor } from '@testing-library/react'
import { MockedProvider } from '@apollo/client/testing';
import { GET_MEMBER_DOCUMENT, Member } from './member';

test('renders without error', () => {
  render(
    <MockedProvider
      addTypename={false}
      defaultOptions={{
        watchQuery: { fetchPolicy: 'no-cache' },　//　ココ！！！
        // query: { fetchPolicy: 'no-cache' },　場合によってはqueryに必要かも。
      }}
      mocks={[
        {
          request: {
            query: GET_MEMBER_QUERY_DOCUMENT,
            variables: {
              name: 'Tom',
            },
          },
          result: {
            data: {
              member: { id: '1', name: 'Tom' },
            },
          },
        },
      ]}
    >
      <Member name="Buck" />
    </MockedProvider>,
  );

  ...

});