React组件测试：如何让同一GQL查询两次返回不同结果？

MockedProvider 的 mocks 数组是按请求调用顺序依次匹配的，你可以为同一个 GQL_QUERY_2 请求添加两个 mock 条目，第一个返回成功响应，第二个返回错误响应，以此对应组件的两次调用。

修改后的 Mock 配置 #

const mocks = [
  {
    request: {
      query: GQL_QUERY_1,
      variables: { id: 123 }
    },
    result: {
      data: { /* 填写 GQL_QUERY_1 的成功响应数据 */ }
    }
  },
  // 第一次调用 GQL_QUERY_2：返回成功结果
  {
    request: {
      query: GQL_QUERY_2,
      variables: {} // 无参查询可显式传空对象，或根据查询定义省略
    },
    result: {
      data: { /* 填写第一次调用的成功响应数据 */ }
    }
  },
  // 第二次调用 GQL_QUERY_2：返回错误
  {
    request: {
      query: GQL_QUERY_2,
      variables: {}
    },
    // 模拟普通错误
    error: new Error('查询失败'),
    // 若需要符合 GraphQL 标准错误结构，可替换为：
    // error: {
    //   message: '查询失败',
    //   graphQLErrors: [{ message: '数据库连接异常' }]
    // }
  }
];

注意事项 #

• 确保两次 GQL_QUERY_2 的 request 完全匹配：无参查询时，variables 需保持一致（要么都传空对象，要么都省略）
• 组件中调用 GQL_QUERY_2 的顺序必须和 mocks 数组中的条目顺序对应，第一次调用匹配第二个 mock，第二次匹配第三个

完整测试组件代码 #

<TestWrapper>
  <MockedProvider mocks={mocks}>
    <MyComponent />
  </MockedProvider>
</TestWrapper>

内容的提问来源于stack exchange，提问作者Sourav Aswal