代码之家 › 专栏 › 技术社区 › HMR

如何使用模拟服务人员测试vue apollo?

vue-test-utils vuejs3 vue.js

0

HMR · 技术社区 · 4 年前

我已经设置了模拟服务工作者来测试我的合成功能,但出现了错误: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup. .

我想我应该使用providedapolloclient,但是在 search 什么也没给我。

文件显示 inject data in component 和模拟模式(不获取该部分)。但我不是在测试一个组件,而是在测试一个自定义组合函数(hook),确保它与useQuery正确接口。

0 回复 | 直到 4 年前

1

kettanaito 4 年前

我认为您收到的错误消息表明Apollo无法完全渲染,因为它无法从上下文中找到任何Apollo客户端。如果调用的代码没有 ApolloProvider 和 client 作为它的父母。即使您正在测试一个钩子,您仍然需要将钩子包装在Apollo的提供者中,并提供 客户 根据阿波罗公司的文件。看看你的React钩子测试库是如何建议你这么做的。

下面是我建议使用的示例 @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中测试挂钩有一个替代方案。希望这能让你朝着正确的方向前进。