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