赛普拉斯没有看到 graphql 请求

Question

这似乎是一个长期存在的问题：

在 cypress 界面中，我的应用程序无法发送任何 graphql 请求或接收任何响应。因为是fetch类型。

这是cypress中的网络状态：

但在普通浏览器中，我实际上有几个 graphql 请求，比如这里：

我知道已经有很多讨论和解决方法，例如使用 polyfill 来解决这个问题，如下所示：

• https://gist.github.com/yagudaev/2ad1ef4a21a2d1cfe0e7d96afc7170bc
• Cypress does not intercept GraphQL API calls

但不幸的是，它们不适用于我的情况。

感谢任何形式的帮助。

p.s.：我使用的是 cypress 8.3.0，React 作为前端，并且使用 apollo 客户端和 apollo 服务器来处理所有 graphql 的东西。

---

编辑：

同样的拦截：

   cy.intercept('POST', Cypress.env('backendpiUrl') + '/graphql', req => {
      if (req.body.operationName === 'updateItem') {
        req.alias = 'updateItemMutation';
      }
    });

cypress 控制台示例：

可以看到所有的请求都是基于XHR的，没有graphql的fetch请求

Answer 1

链接是旧的，unfetch polyfill 不再需要。由于引入了cy.intercept()，fetch 可以被等待、被存根等等。

这是文档Working with GraphQL 和一个有趣的文章Smart GraphQL Stubbing in Cypress（注意route2 是intercept 的早期名称）

更多最新消息，两天前发布bahmutov - todo-graphql-example

此包中的关键辅助函数：

import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
  ApolloLink,
  concat,
} from '@apollo/client'

// adding custom header with the GraphQL operation name
// https://www.apollographql.com/docs/react/networking/advanced-http-networking/
const operationNameLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers }) => ({
    headers: {
      'x-gql-operation-name': operation.operationName,
      ...headers,
    },
  }))
  return forward(operation)
})

const httpLink = new HttpLink({ uri: 'http://localhost:3000' })

export const client = new ApolloClient({
  link: concat(operationNameLink, httpLink),
  fetchOptions: {
    mode: 'no-cors',
  },
  cache: new InMemoryCache(),
})

样本测试

describe('GraphQL client', () => {
  // make individual GraphQL calls using the app's own client

  it('gets all todos (id, title)', () => {
    const query = gql`
      query listTodos {
        # operation name
        allTodos {
          # fields to pick
          id
          title
        }
      }
    `
    cy.wrap(
      client.query({
        query,
      }),
    )
      .its('data.allTodos')
      .should('have.length.gte', 2)
      .its('0')
      .should('deep.equal', {
        id: todos[0].id,
        title: todos[0].title,
        __typename: 'Todo',
      })
  })

请显示您的测试和错误（或拦截失败）。