运行e2e测试时在cypress中模拟特定的graphql请求

使用运行e2e测试时，我的目标是模拟特定的graphql查询

目前，我可以模拟以下所有请求：

cy.server（）；
cy.route（'POST'，'/graphql'{
数据：{
福：“酒吧”
},
});

问题是，这会模拟所有

/graphql

查询。如果我能说：

cy.route（'POST'，'/graphql'，'fookquery'{
数据：{
福：“酒吧”
},
});

---

在我们的应用程序中，我们使用的是Apollo Graphql，因此所有查询都被命名。

一种方法是在一个fixture文件中为所讨论的Graphql操作提供模拟数据

cypress/support/commands.js

Cypress.Commands.add('stubGraphQL', (graphQlFixture) => {
  cy.fixture(graphQlFixture).then((mockedData) => {
    cy.on('window:before:load', (win) => {
      function fetch(path, { body }) {
        const { operationName } = JSON.parse(body)
        return responseStub(mockedData[operationName])
      }
      cy.stub(win, 'fetch', fetch).withArgs("/graphql").as('graphql');
    });
  })
})


const responseStub = result => Promise.resolve({
  json: () => Promise.resolve(result),
  text: () => Promise.resolve(JSON.stringify(result)),
  ok: true,
})
//TODO how to get it to stop listening and trying to stub once the list of operations provided in fixture have been stubbed?

示例fixture文件

cypress/fixtures/signinooperation.json（请注意，其中有两个操作，这就是您可以指定对mock的响应的方式）

在您的规范文件中

---

使用cypress 5.1，使用新的

route2

命令，模拟GraphQL请求非常简单，例如：

cy.route2('/graphql', (req) => {
  if(req.body.includes('operationName')){
    req.reply({ fixture: 'mockData.json'});
  }
});

我刚刚添加了一个if条件来评估GraphQL请求的主体是否包含某个字符串作为查询的一部分。 如果这是真的，那么我将使用从夹具加载的自定义实体进行回复

cy.route2（）

的文档：

---

不推荐使用cypress 6.0

路由

和

路由2

，建议使用

拦截

。如文档（）中所述，您可以通过以下方式模拟GraphQL请求：

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

---

在cypress github的评论中发布了此问题的不同解决方法：。让我们知道哪一个为您工作感谢您提供我们采用的信息

intercept

这很好-标记为正确答案。@roberto尝试了intercept函数，我的test.json文件包含Apollo客户端查询返回的数据。获取以下未捕获的异常：“未捕获的CypressError:以下错误源于您的测试代码，而不是Cypress。>传递给

cy.intercept（）的请求回调在拦截请求时抛出了一个错误：JSON中的意外标记o位于位置1”@SuperMario，检查JSON文件是否有一些错误的字符。似乎我在那里进入了一个无限循环。它尝试从夹具加载数据，然后重试，没有任何错误。
cy.route2('/graphql', (req) => {
  if(req.body.includes('operationName')){
    req.reply({ fixture: 'mockData.json'});
  }
});

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