Apollo Mock Error state -> Error: No more mocked response for the query答案

【问题标题】：Apollo Mock Error state -> Error: No more mocked responses for the queryApollo Mock Error state -> Error: No more mocked response for the query
【发布时间】：2020-12-23 02:25:15
【问题描述】：

我想做什么？

使用@apollo/client/testing 中的MockProvider 模拟查询的错误状态。

我期望得到什么？

组件使用useLazyQuery从后端查询一些东西，并返回一个error，这将触发组件呈现错误消息。

组件按预期工作。

我实际上得到了什么？

错误：未捕获 [错误：查询没有更多的模拟响应......并且测试没有通过。

我尝试了什么？

最终状态按预期工作。我尝试删除模拟数据中的错误状态，一切正常。
我试图等待更长时间，但没有帮助
我尝试在组件中记录错误，我可以看到错误。看起来 MockProvider 缺少一些东西，甚至在渲染组件之前就出错了
我尝试删除data 部分，或将其重新添加到模拟中。请参阅下面的代码

您的代码在哪里？

尝试#1

const mock = {
      request: { query: GET_REFERRER_FROM_CODE, variables: { input: "edx" } },
      result: {
        errors: [new GraphQLError("Error!")],
        data: {
          userGetReferrerFromCode: {
            id: "abc",
            firstName: "Leo",
            lastName: "Qiu",
          },
        },
      },
    };

尝试#2

const mock = {
      request: { query: GET_REFERRER_FROM_CODE, variables: { input: "edx" } },
      result: {
        errors: [new GraphQLError("Error!")],
      },
    };

基本代码

<MockedProvider addTypename={false} mocks={mocks}>
   ...
</MockedProvider>

【问题讨论】：

你找到解决办法了吗？

标签： graphql apollo react-apollo react-testing-library

【解决方案1】：

根据经验，我发现错误字段不需要嵌套在结果中即可触发错误。

例如

const mocks = [
    {
        request: { query: GET_REFERRER_FROM_CODE, variables: { input: "edx" } },      
        error: {
            message: "Something went wrong",
        },
    }
];

那么当使用时

const { loading, data, error } = useQuery(GET_REFERRER_FROM_CODE, {
    variables: { input: "edx" },
});

error 将包含来自模拟的对象。

【讨论】：