如何用Cypress的cy.intercept()模拟ECONNREFUSED错误测试界面

核心实现思路 #

通过cy.intercept()拦截GraphQL请求，模拟网络连接错误（对应ECONNREFUSED），触发Apollo客户端的错误处理逻辑，进而验证离线界面是否正常显示。

具体代码示例 #

1. 全局拦截所有GraphQL请求 #

如果需要测试所有GraphQL请求失败的场景，直接拦截项目的GraphQL端点（通常是/graphql），强制触发网络错误：

it('服务器离线时显示指定界面', () => {
  // 拦截POST请求到GraphQL端点，模拟ECONNREFUSED错误
  cy.intercept('POST', '/graphql', {
    forceNetworkError: true,
    error: new Error('connect ECONNREFUSED')
  }).as('graphqlOffline');

  // 访问目标页面
  cy.visit('/');

  // 等待请求触发，验证错误类型
  cy.wait('@graphqlOffline').then(interception => {
    expect(interception.error.message).to.include('connect ECONNREFUSED');
  });

  // 验证离线界面元素是否可见（替换为你项目中的实际选择器）
  cy.get('.offline-notification').should('be.visible');
});

2. 精准拦截特定GraphQL查询 #

如果只需测试某个特定查询失败的场景，通过检查请求体中的operationName精准拦截：

it('特定查询失败时显示离线界面', () => {
  cy.intercept('POST', '/graphql', (req) => {
    // 匹配目标查询的operationName
    if (req.body.operationName === 'GetUserProfile') {
      req.reply({
        forceNetworkError: true,
        error: new Error('connect ECONNREFUSED')
      });
    }
  }).as('profileQueryOffline');

  cy.visit('/profile');

  cy.wait('@profileQueryOffline');

  // 验证离线界面是否显示
  cy.get('#offline-ui').should('exist');
});

关键注意事项 #

• 端点匹配：确保拦截的URL与项目中Apollo客户端配置的GraphQL端点完全一致（如果是绝对路径，需写全如https://api.yourdomain.com/graphql）。
• 重试处理：如果Apollo客户端配置了请求重试，测试时可能需要调整拦截逻辑（比如允许多次拦截），或等待重试完成后再验证UI。
• 错误匹配：forceNetworkError: true会模拟真实的网络连接失败，与手动关闭服务器的场景完全一致，确保Apollo客户端能捕获到ECONNREFUSED错误。

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