cypress和react-apollo之间的兼容性

Question

我使用react-apollo进行GraphQL查询，并使用Cypress进行测试。

问题是，这两个似乎不能很好地合作。Apollo似乎是通过Fetch API发出所有请求。

​

​

但是Cypress似乎不能捕获任何东西，除了XHR请求。

那么我能做些什么来解决这个问题呢？Cypress有没有办法捕获"fetch“请求？react-apollo有没有办法用"xhr“代替"fetch"？

Answer 1

尝试使用cypress-graphql-mock

你只需要把你的schema传给它

const schema = fs.readFileSync('../../app-schema.graphql', 'utf8');
// alternatively, using a dumped introspection query:
// const schema = require('../../dumped-schema.json')

beforeEach(() => {
  cy.server();
  cy.mockGraphql({ schema });
});

Answer 2

一种简单的解决方法是使用whatwg-fetch，您可以通过npm将其添加为依赖项，然后...

cypress/support/fetch_to_xhr.js

function fetchToXhr() {
  let polyfill

  before(() => {
    cy.readFile('node_modules/whatwg-fetch/dist/fetch.umd.js')
      .then((contents) => polyfill = contents)
    Cypress.on('window:before:load', (win) => {
      delete win.fetch
      win.eval(polyfill)
    })
  })
}

fetchToXhr()

cypress/support/index.js

import "./fetch_to_xhr";

之后，cypress将捕获graphql请求

Answer 3

Cypress现在正式支持使用GQL：Working with GraphQL。

我建议详细阅读他们的文档，但这是一个非常粗糙的TLDR，风险自负：

cy.intercept('your-url-here/graphql', (req) => {
    const { body } = req;
    if (body.hasOwnProperty('your-operationName-here')) {
        // do something with the request, like:
        req.reply('your-mock-here');
    }
  });