如何测试带有client选项的useQuery且不移除该选项?
解决MockedProvider无法匹配带client选项的useQuery请求问题
当你在useQuery中指定了client选项时,MockedProvider会依据该客户端的标识来匹配请求,默认的mock配置缺少对应标识,导致匹配失败。以下两种方法可以解决这个问题:
方法一:在mock请求中添加客户端标识
如果你的Apollo客户端在创建时指定了name或id属性,直接在mock的request对象中添加对应的clientName或clientId字段即可匹配:
示例:匹配客户端name
假设你的客户端创建代码如下:
const someApolloClient = new ApolloClient({ name: "custom-client", // 其他配置项 });
修改mock配置:
const mock = { request: { query: "query", variables: {id: "some-id"}, clientName: "custom-client" // 对应客户端的name }, result: { data: "my result", } };
示例:匹配客户端id
如果客户端用的是id标识:
const someApolloClient = new ApolloClient({ id: "client-123", // 其他配置项 });
修改mock配置:
const mock = { request: { query: "query", variables: {id: "some-id"}, clientId: "client-123" // 对应客户端的id }, result: { data: "my result", } };
方法二:给MockedProvider传入对应客户端
直接将组件中使用的客户端实例传给MockedProvider的client属性,这样mock就能自动匹配该客户端发起的请求:
// 可以复用你的someApolloClient,或在测试环境创建模拟客户端 const testClient = someApolloClient; <MockedProvider mocks={[mock]} addTypename={false} client={testClient} > <MyComponent /> </MockedProvider>
内容的提问来源于stack exchange,提问作者George
相关产品推荐
相关产品推荐

