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

Question

Ich habe einen simulierten Service-Worker eingerichtet, um meine Kompositionsfunktionalität zu testen, erhalte jedoch die Fehlermeldung: ID wurde nicht außerhalb der Standardeinstellung gefunden. Apollo 客户端。如果您位于组件 setup. Bitte verwenden Sie ProvideApolloClient().

Ich dachte, ich sollte „proveApolloClient“ verwenden, aber wenn ich es in die Suche einfüge, bekomme ich nichts.

Die Dokumentation zeigt das Einfügen von Daten im Komponenten- und Mock-Modus (dieser Teil wird nicht abgerufen). Aber anstatt die Komponente zu testen, versuche ich, eine benutzerdefinierte zusammengesetzte Funktion (Hook) zu testen und sicherzustellen, dass sie korrekt mit useQuery interagiert.

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 中测试钩子。希望这能激励您朝着正确的方向前进。