如何让Cypress测试在发起未关联Intercept的请求时自动失败？

核心思路 #

借助Cypress的cy.intercept()请求拦截能力，结合测试钩子记录所有发起的请求，校验每个请求是否已被显式Mock，一旦发现未被Mock的请求就直接触发测试失败。

实现步骤 #

1. 请求发起时立即校验（实时终止测试）

可以在cypress/support/e2e.js中配置全局规则，让所有测试都强制遵循“所有请求必须Mock”的要求：

// 维护已Mock的请求集合
const mockedRequests = new Set();

// 封装自定义Mock方法，自动记录已Mock的端点
Cypress.Commands.add('mock', (method, url, response) => {
  const requestKey = `${method.toUpperCase()}:${url}`;
  mockedRequests.add(requestKey);
  return cy.intercept(method, url, response);
});

beforeEach(() => {
  // 清空上一次测试的记录
  mockedRequests.clear();
  
  // 用自定义方法Mock你的10个请求
  cy.mock('GET', '/api/user-profile', { fixture: 'user.json' });
  cy.mock('POST', '/api/auth/login', { statusCode: 200, body: { token: 'fake-token' } });
  // ... 剩下8个请求的Mock配置
  
  // 拦截所有请求，实时校验是否已被Mock
  cy.intercept('*', (req) => {
    const requestKey = `${req.method}:${req.url}`;
    if (!mockedRequests.has(requestKey)) {
      // 抛出错误直接终止测试
      throw new Error(`⚠️ 检测到未被Mock的请求：${requestKey}`);
    }
  });
});

2. 测试结束后批量校验（统一报告结果）

如果不想在请求发起时立即终止，也可以在测试结束后统一检查并报告未Mock的请求：

let allRequests = [];

beforeEach(() => {
  allRequests = [];
  
  // 记录所有发起的请求
  cy.intercept('*', (req) => {
    allRequests.push({ method: req.method, url: req.url });
  });
  
  // 显式Mock所有需要的请求
  cy.intercept('GET', '/api/user-profile', { fixture: 'user.json' });
  // ... 其他9个请求的Mock配置
});

afterEach(() => {
  // 定义已Mock的请求列表
  const mockedEndpoints = [
    { method: 'GET', url: '/api/user-profile' },
    { method: 'POST', url: '/api/auth/login' },
    // ... 其他8个请求
  ];
  
  // 筛选出未被Mock的请求
  const unmockedRequests = allRequests.filter(req => {
    return !mockedEndpoints.some(mock => 
      mock.method === req.method && mock.url === req.url
    );
  });
  
  // 断言未被Mock的请求必须为空，否则抛出详细错误
  expect(unmockedRequests, `存在未被Mock的请求：${JSON.stringify(unmockedRequests)}`).to.be.empty;
});

注意事项 #

• 如果需要排除特定请求（比如第三方CDN资源、静态文件），可以在校验逻辑中添加过滤，比如跳过包含cdn.example.com的URL。
• 若请求包含动态参数（如/api/user/123），建议用正则表达式作为URL匹配规则，避免因参数差异导致误判。

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