Jest测试时Apollo MockedProvider无法正常返回模拟数据问题

常见原因及解决方案 #

• __typename字段未正确配置
  GraphQL的... on 类型名片段匹配完全依赖返回数据中的__typename元字段做类型校验。你需要确保模拟返回的getPersonalNetworkClaimsList对应的对象中，明确携带__typename: "PersonalNetworkClaimSuccess"，如果缺失或者值拼写错误，Apollo Client会判定该对象不匹配你的片段规则，片段中声明的字段都会被丢弃，最终只返回空对象。
  正确的mock结构示例：

  const enterpriseClaimsMock = {
    request: { query: GET_ENTERPRISE_CLAIMS },
    result: {
      data: {
        getPersonalNetworkClaimsList: {
          __typename: "PersonalNetworkClaimSuccess", // 必须配置，值和片段类型名完全一致
          // 其他你在片段中声明的查询字段
          id: "test_001",
          claimContent: "测试数据"
        }
      }
    }
  }
  

• Mock配置与实际请求不匹配
  检查MockedProvider中配置的mock项，是否和组件实际触发的查询完全一致：包括查询变量的取值、顺序，查询语句本身的字段列表，任意差异都会导致匹配失败，MockedProvider不会返回你定义的模拟数据。同时检查mock的result字段结构是否正确，必须是result: { data: 业务数据 }的格式，不要直接把业务数据放在result字段下。
• 未等待异步查询完成就断言
  useQuery是异步执行逻辑，就算配置了正确的mock，也需要等查询完成、loading状态变为false后再读取data或者断言DOM。测试时需要用waitFor包裹断言逻辑，或者用find*系列的异步查询方法，不要直接用同步的get*方法断言。
• 联合/接口类型缺少possibleTypes配置
  如果你的PersonalNetworkClaimSuccess是某个接口或者联合类型的实现类，你需要给测试用的MockedProvider实例配置possibleTypes，明确类型映射关系，否则Apollo无法正确识别片段的类型匹配。

内容的提问来源于stack exchange，提问作者Jon Michael Ossola