Cypress 8.3.0无法捕获GraphQL fetch类型请求 现有方案无效求助

解决步骤 #

1. 开启Cypress fetch拦截实验配置

在项目根目录的cypress.json中添加如下配置，Cypress 8.x版本的fetch拦截默认属于实验能力，必须手动开启才会生效：

{
  "experimentalFetchPolyfill": true
}

2. 调整fetch polyfill注入时机

把polyfill代码放在cypress/support/index.js的最顶部，要早于所有其他导入代码，否则会因为应用的fetch初始化早于polyfill注入导致失效：

// 放在文件第一行，所有其他代码前
Cypress.on('window:before:load', (win) => {
  // 删除原生fetch，强制替换为Cypress可拦截的实现
  delete win.fetch;
  win.fetch = require('unfetch');
});

3. 修正Apollo Client配置

在你的React应用的Apollo Client初始化逻辑中，新增测试场景下的fetch绑定，避免Apollo内部封装的fetch脱离Cypress的监听范围：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';

const httpLink = createHttpLink({
  uri: `${process.env.REACT_APP_BACKEND_URL}/graphql`,
  // 测试环境下强制绑定全局window.fetch，保证Cypress可捕获
  fetch: window.Cypress ? window.fetch.bind(window) : fetch,
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

4. 检查拦截代码拼写错误

你提供的拦截代码中Cypress.env('backendpiUrl')存在拼写问题，大概率是少写了字母a，正确应为backendApiUrl，路径拼写错误会直接导致拦截失效。修正后的参考代码：

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

完成以上配置后重新运行测试，即可在Cypress网络面板中看到对应的fetch类型GraphQL请求，拦截逻辑也会正常生效。

内容的提问来源于stack exchange，提问作者pyy