Comment utiliser un Service Worker fictif pour tester Vue Apollo ?

Question

J'ai configuré un service worker fictif pour tester ma fonctionnalité de composition, mais j'obtiens l'erreur : identifiant introuvable en dehors de la valeur par défaut Apollo 客户端。如果您位于组件 setup. veuillez utiliser ProvideApolloClient().

Je pensais que je devrais utiliser provideApolloClient, mais le coller dans la recherche ne me rapporte rien.

La documentation montre l'injection de données en mode composant et simulé (sans obtenir cette partie). Mais au lieu de tester le composant, j'essaie de tester une fonction composée personnalisée (hook) et de m'assurer qu'elle interagit correctement avec useQuery.

Answer 1

Je pense que le message d'erreur que vous recevez indique qu'Apollo ne peut pas effectuer un rendu complet car il ne trouve aucun client Apollo dans le contexte. Si le code que vous appelez n'a pas d'instance ApolloProvider 且以 client 作为其父级，则可能会发生这种情况。即使您正在测试钩子，您仍然必须渲染包裹在 Apollo 的 Provider 中的钩子，并根据 Apollo 的文档提供 client. Découvrez comment votre bibliothèque de tests de hook React suggère de procéder ainsi.

C'est ce que je recommande d'utiliser @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
})

Je sais que cela ne se traduira pas directement dans Vue, mais je suis sûr qu'il existe une autre façon de tester les hooks dans Vue. J'espère que cela vous inspire dans la bonne direction.