Bagaimana untuk menggunakan mock Service Worker untuk menguji vue apollo?

Question

Saya telah menyediakan pekerja perkhidmatan olok-olok untuk menguji kefungsian gubahan saya tetapi saya mendapat ralat: id tidak ditemui di luar lalai Apollo 客户端。如果您位于组件 setup. sila gunakan ProvideApolloClient().

Saya fikir saya harus menggunakan provideApolloClient, tetapi menampalnya ke dalam carian tidak memberi saya apa-apa.

Dokumentasi menunjukkan menyuntik data dalam mod komponen dan olok-olok (tidak mendapat bahagian itu). Tetapi daripada menguji komponen, saya cuba menguji fungsi tersuai (cangkuk) dan pastikan ia berinteraksi dengan betul dengan useQuery.

Answer 1

Saya rasa mesej ralat yang anda terima menunjukkan bahawa Apollo tidak dapat dipaparkan sepenuhnya kerana ia tidak dapat mencari mana-mana pelanggan Apollo daripada konteks. Jika kod yang anda panggil tidak mempunyai instance ApolloProvider 且以 client 作为其父级，则可能会发生这种情况。即使您正在测试钩子，您仍然必须渲染包裹在 Apollo 的 Provider 中的钩子，并根据 Apollo 的文档提供 client. Lihat bagaimana perpustakaan ujian cangkuk React anda mencadangkan untuk melakukan ini.

Inilah yang saya syorkan menggunakan @testing-library 的示例/react-hooks:

import { ApolloProvider } from '@apollo/client'
import { renderHook } from '@testing-library/react-hooks'
import { client } from './apollo-client'
import { myHook } from './myHook'

it('runs the hook as expected', () => {
  renderHook(() => myHook(), {
    wrapper({ children }) {
      return {children}
    }
  })
  // actions and assertions here
})

Saya tahu ini tidak akan diterjemahkan terus kepada Vue, tetapi saya pasti ada cara alternatif untuk menguji cangkuk dalam Vue. Semoga ini memberi inspirasi kepada anda ke arah yang betul.