Wie verwende ich einen simulierten Service Worker, um Vue Apollo zu testen?

Question

Ich habe einen Schein-Service-Worker eingerichtet, um meine Kompositionsfunktionalität zu testen, erhalte jedoch die Fehlermeldung: Apollo-Client mit der Standard-ID nicht gefunden. Wenn Sie sich außerhalb des Komponenten-Setups befinden, verwenden Sie ProvideApolloClient(). Ich dachte, ich sollte „proveApolloClient“ verwenden, aber das Einfügen in eine Suche bringt nichts. Die Dokumentation zeigt, wie Daten im Komponenten- und Mock-Modus eingefügt werden (dieser Teil wird nicht abgerufen). Aber ich teste die Komponente nicht, ich versuche, eine benutzerdefinierte Kompositionsfunktion (Hook) zu testen und sicherzustellen, dass sie mit useQuery funktioniert

P粉821274260 · Answer

我认为您收到的错误消息表明 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 中测试钩子。希望这能激励您朝着正确的方向前进。