在 Cypress 命令中使用 Graphql 突变答案

【问题标题】：Use Graphql mutation in Cypress command在 Cypress 命令中使用 Graphql 突变
【发布时间】：2021-05-11 21:29:59
【问题描述】：

我想在commands.js 文件中向赛普拉斯添加一个cy.signUp 命令。前端应用使用 Graphql 和 React 与后端应用通信。

我无法找到在 commands.js 文件中使用突变的方法，因为 documentation 仅提供与 React 一起使用的方法。

如何在此文件中使用 graphql 来添加基于突变的新命令？

【问题讨论】：

这能回答你的问题吗？ Call GraphQL endpoints using Cypress .request
@jonrsharpe 我看到了那个帖子，但这是一种解决方法，而不是实际使用 Graphql 的解决方案
你认为“实际使用Graphql”是什么意思？它只是一种查询语言，在这种情况下使用 HTTP 作为传输，并且可能遵循 graphql.org/learn/serving-over-http 中的约定。
根据我猜的链接 “实际突变” 你的意思是阿波罗；请注意，这只是一个 JS 库，用于使用各种客户端创建查询以发出请求，我不知道是否有赛普拉斯客户端使用 cy.request 进行传输。您可以通过使用 UI 登录将您的测试与 GraphQL 完全分离 - 我知道 Cypress 的人 consider that an anti-pattern，但您的用户不必关心您如何组织 API，因此您的 E2E 测试也不应该关心。跨度>

标签： graphql cypress

【解决方案1】：

这对我有用：

const mutation = `
mutation {
  // whatever you have for the mutation
}
`
cy.request({
  url: '/',
  method: 'POST',
  body: {
    query: mutation
  }
});

【讨论】：

【解决方案2】：

我最近遇到了这个问题，我可以通过在 cypress 的支持文件夹中的 command.js 中添加一个命令来解决这个问题。

Cypress.Commands.add('apiMutation', (mutations) => {
    cy.request({
        method:'POST',
        url:'api/graphql',
        body: { query : "mutation" + mutations }         
    })
})

问题在于 cy.request 要求您在正文中进行查询，或者当然这就是我的感觉。

您可以通过在实际查询（突变）之前在正文中添加单词突变来覆盖它。如下所示

body: { query : "mutation" + mutations }

您可以提出如下要求：

describe("Reservation Validations", () => {
     it("should return a valid addAdditions mutation", () => {
        cy.apiMutation('{addAdditions(reservationId: 1001 reservedResourceId: 100 additions: { resourceId: 10 quantity: 12 }){resourceId  type resortArticle}}'
        ).then((Response) => {
            expect(Response.body.data).to.have.property("addAdditions")
            expect(Response.body.data.addAdditions).to.not.be.undefined
        })
    })
})

【讨论】：