如何使用mock service worker测试vue apollo？

Question

我已经设置了模拟服务工作者来测试我的组合函数，但出现错误：Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.。

我想我应该使用 provideApolloClient，但将其粘贴到 search 中没有任何结果。

文档显示 inject data in component 和模拟模式（没有得到那部分）。但我不是在测试组件，而是在尝试测试自定义组合函数（挂钩）并确保它与 useQuery 正确连接。

Answer 1

我认为您收到的错误消息表明 Apollo 无法完全呈现，因为它无法从上下文中找到任何 Apollo Client。如果您调用的代码没有 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 <ApolloProvider client={client}>{children}</ApolloProvider>
    }
  })
  // actions and assertions here
})

我知道这不会直接转化为 Vue，但我确信在 Vue 中有测试挂钩的替代方法。希望这能让你朝着正确的方向前进。

如何使用mock service worker测试vue apollo？

How to use mock service worker to test vue apollo?

vue.js

vuejs3

vue-test-utils