MockProvider adalah cara yang disarankan untuk mengejek permintaan dan hasil klien Apollo. T dia contoh kode tampaknya mudah, tetapi ketika datang ke penggunaan dunia nyata, Anda dapat memukul beberapa hambatan. Meskipun sudah ada artikel bagus di media tentang tip penggunaan MockProvider, saya masih menghabiskan beberapa jam berurusan dengan perilaku MockProvier yang tidak terduga. Dalam artikel ini, saya akan membahas beberapa masalah yang saya temukan sebelum mengejek tanggapan dengan benar.

FYI, inilah lingkungan yang saya gunakan dalam artikel ini:

@apollo/client: 3.2.0
react-native:0.62.2
jest: 24.9.0
react-native-testing-library: 2.1.1

Saat Anda menjalankan pengujian pertama Anda dengan MockProvider, Anda mungkin mendapatkan pesan kesalahan di bawah ini:

TypeError: (0 , _client.useQuery) is not a function
    > 35 |   const { data } = useQuery(document, {

      

import { useQuery } from '@apollo/client/react/hooks/useQuery'

Ini sudah disebutkan dalam artikel yang saya bagikan di atas, tetapi saya ingin menekankannya lagi karena Anda dapat dengan mudah jatuh ke dalam perangkap ini. Jika Anda menggunakan Fragment, Anda harus selalu menambahkan __typenamerespons yang diejek bahkan tidak __typenameditentukan oleh gql , atau Apollo gagal mengembalikan nilainya.

Berikut contohnya:

query currentUserFriends(
   {
  me {
    id
    friends {
      pageInfo {
        ...pageInfoFragment
      }
      ...
    }
  }
}
fragment pageInfoFragment on PageInfo {
  endCursor
  hasNextPage
  hasPreviousPage
  startCursor
}

const mocks = [
      {
        request: {... },
        result: {
          data: {
            me: {
              id: '123',
              friends: {
                __typename: 'FriendConnection',
                pageInfo: {
                  __typename: 'PageInfo',
                  endCursor: '1',
                  hasNextPage: false,
                  hasPreviousPage: false,
                  startCursor: '2',
                }, ...
              },
              __typename: 'Me',
            },
          },
        },
      },
    ];

{|
  __typename: "Friend",
  id: string,
  name: string,
  age: ?number
|}

{
  __typename: "Friend",
  id: 3,
  name: "Buck",
  age: null
}

MockProvider tidak memberi Anda respons palsu kecuali Anda secara eksplisit memicu render dan melakukan pembaruan. Jika Anda menggunakan react-native-testing-librarymaka actfungsi akan memperbarui komponen. Saya membuat komponen pembungkus seperti di bawah ini:

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

const { getByText } = render(component);
await updateWrapper(component);
expect(getByText('@Buck'));

Ini adalah pesan tipikal yang akan Anda terima ketika permintaan ejekan gagal.

No instances found
96 |     const { getByText } = render(component);
   97 |     await updateWrapper(component);
>  98 |     expect(getByText('@Buck'));

      

<MockedProvider
  mocks={mocks}
  addTypename
  cache={
    new InMemoryCache({
      possibleTypes,
    })
  }
>
  {component}
</MockedProvider>

Setelah menambahkan InMemoryCache, Anda mungkin akan melihat error di bawah.

Invariant Violation: Missing field 'node' in {
     "__typename": "FriendEdge",
     "cursor": "a"
   }

      

5. Kesalahan “Tidak ada lagi tanggapan yang mengejek” => periksa masukan Anda

Kesalahan lain yang sering kami lihat adalah "Tidak ada lagi tanggapan yang diejek".

Jika Anda melihat kesalahan ini, biasanya karena variabel dalam pengujian Anda tidak cocok dengan komponen sebenarnya. Dalam hal ini, Anda harus memeriksa variabel Anda secara menyeluruh.

Izinkan saya memberi Anda satu contoh. Komponen di bawah ini memiliki { first:10 }sebagai masukan.

const FriendList = (props: Props) => {
  const { data } = useQuery(document, { variables: { first: 10 }});

const mocks = [
  {
    request: { query: currentUserFriends, variables: { first: 10 } },
    result: { ... }
  }
]

Terkadang merupakan ide yang baik untuk menonaktifkan cache MockProvider karena dapat menyebabkan hasil yang tidak terduga saat menangani mutasi atau kueri yang berjalan beberapa kali.

<MockedProvider
  mocks={mocks}
  addTypename
  defaultOptions={{
    watchQuery: { fetchPolicy: 'no-cache' },
    query: { fetchPolicy: 'no-cache' },
  }}
  cache={
    new InMemoryCache({
      possibleTypes,
    })
  }
>
  {component}
</MockedProvider>