赛普拉斯中具有多个存根的模拟 Graphql 服务器答案

【问题标题】：Mock Graphql server with multiple stubs in Cypress赛普拉斯中具有多个存根的模拟 Graphql 服务器
【发布时间】：2020-11-23 16:45:39
【问题描述】：

问题： 我正在使用带有 angular 和 apollo graphQl 的 cypress。我正在尝试模拟图形服务器，因此我使用自定义响应编写测试。这里的问题是所有图形调用都在一个端点上进行，并且 cypress 还没有默认的完整网络支持来区分这些调用。

一个示例场景是：

访问 /accounts/account123
当调用 api 时，会发出两个图形调用 - 一个查询 getAccountDetails，另一个查询 getVehicles

试过了：

每次测试使用一个图形端点的存根。不工作，因为它使用相同的存根所有调用。
更改应用程序，以便将查询“随时”附加到 url，我可以在 cypress 中截取它，因此每个查询都有一个唯一的 url。无法更改应用。
我唯一的赌注似乎是拦截 XHR 调用并使用它，但我似乎无法让它工作使用此处概述的 XHR 尝试了所有选项，但没有运气（它只选择最后声明的存根和将其用于所有呼叫）https://github.com/cypress-io/cypress-documentation/issues/122。

这个问题的答案使用 Fetch，因此不适用： Mock specific graphql request in cypress when running e2e tests

有人有什么想法吗？

【问题讨论】：

标签： graphql cypress

【解决方案1】：

我使用的“修复”是在同一条路由上创建多个具有不同名称的别名，等待不同名称之间的别名，与您的请求一样多。

【讨论】：

你介意举个例子吗？我不确定我知道这将如何解决问题

【解决方案2】：

我猜你可以像上面@Luis 的回答中所建议的那样使用别名。这也在文档中给出。唯一需要在这里使用的是多个别名，因为您有多个调用并且必须管理它们之间的顺序。如果我以其他方式理解您的问题，请纠正我？？

cy.route({
  method: 'POST',
  url: 'abc/*',
  status: 200.
  response: {whatever response is needed in mock }
}).as('mockAPI')

// HERE YOU SHOULD WAIT till the mockAPI is resolved. 
cy.wait('@mockAPI')

【讨论】：

在您描述的示例中，响应将针对需要不同存根的两个 Graph 查询（getAccountDetail 和 getVehicles - 在我上面的示例中）启动。如果标题或描述有误导性，请告诉我，以便我进行调整
也许您可以提供更多关于您正在访问的 API 数量的详细信息。少量 API 流的发生将有助于更好地理解问题。例如-首先您要访问accounts/account123 XHR，然后使用其中的一些数据--另一个2 XHR 并行响应？这是行为吗？
流程是这样的：我点击 accounts/account123，然后发送两个异步查询到图形服务器（getAccountDetail & getVehicles）。这只是一个示例，因为对于同一个 api 调用，很容易有两个以上的调用链接到图形服务器

【解决方案3】：

对于遇到此问题的其他人，使用cy.route2() 的新柏树release 有一个可行的解决方案

请求被发送到服务器，但响应在返回时被存根/更改。

后期编辑：请注意，下面的代码版本不会更改状态代码。如果你需要这个，我会推荐我在下面评论中留下的版本。

示例代码：

describe('account details', () => {
  it('should display the account details correctly', () => {
    cy.route2(graphEndpoint, (req) => {
      let body = req.body;
      if (body == getAccountDetailsQuery) {
        req.reply((res) => {
          res.body = getAccountDetailsResponse,
          res.status = 200
        });
      } else if (body == getVehiclesQuery) {
        req.reply((res) => {
          res.body = getVehiclesResponse,
          res.status = 200
        });
      }
    }).as('accountStub');
    cy.visit('/accounts/account123').wait('@accountStub');
  });
});

您的查询和响应都应该是字符串格式。

【讨论】：

也可以在这里找到类似的解决方案：glebbahmutov.com/blog/smart-graphql-stubbing

【解决方案4】：

在 cypress 6.0 中 route 和 route2 已弃用，建议使用拦截。正如文档 (https://docs.cypress.io/api/commands/intercept.html#Aliasing-individual-GraphQL-requests) 中所写，您可以通过以下方式模拟 GraphQL 请求：

cy.intercept('POST', '/api', (req) => {
            if (req.body.operationName === 'operationName') {
                req.reply({ fixture: 'mockData.json'});
            }

【讨论】：