如何使用模擬Service Worker來測試vue apollo？

Question

我已經設定了模擬服務工作者來測試我的組合功能，但收到錯誤：找不到 id 預設的 Apollo 用戶端。如果您位於組件 setup. 之外，請使用 ProvideApolloClient()。

我想我應該使用provideApolloClient，但是將其貼到搜尋中卻什麼也沒得到。

文件顯示在元件和模擬模式中註入資料（未取得該部分）。但我不是在測試元件，而是在嘗試測試自訂組合函數（掛鉤）並確保它與 useQuery 正確互動。

Answer 1

我認為您收到的錯誤訊息表明 Apollo 無法完全渲染，因為它無法從上下文中找到任何 Apollo 用戶端。如果您呼叫的程式碼沒有 ApolloProvider 且以 client 作為其父級，則可能會發生這種情況。即使您正在測試鉤子，您仍然必須渲染包裹在 Apollo 的 Provider 中的鉤子，並根據 Apollo 的文檔提供 client 實例。看看你的 React hook 測試庫建議如何做。

這是我建議使用 @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
})

我知道這不會直接轉化為 Vue，但我確信有一種替代方法可以在 Vue 中測試鉤子。希望這能激勵您朝著正確的方向前進。