如何配置Cypress仅允许存根路由，未存根请求触发测试失败？

刚好我之前也碰到过一模一样的需求——就是要确保所有XHR请求都被存根，让测试完全脱离真实服务器运行，只要有任何漏存根的请求发起，直接让测试失败，避免意外访问真实服务。下面是两种可行的实现方式，看你用的是新版还是旧版的Cypress API：

方式一：用新版cy.intercept()（官方推荐） #

现在Cypress已经把cy.route()标记为过时了，更推荐用cy.intercept()来处理请求拦截。你可以在测试的全局钩子（比如beforeEach）里先定义好所有需要存根的请求，然后再加一个全局拦截器，专门抓那些没被匹配到的请求，直接抛出错误终止测试：

beforeEach(() => {
  // 先定义你的业务请求存根，比如获取用户列表
  cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
  // 再比如提交表单的请求
  cy.intercept('POST', '/api/submit-form', { statusCode: 200, body: { success: true } }).as('submitForm');

  // 拦截所有未被存根的XHR请求
  cy.intercept('*', (req) => {
    // 判断请求是否有对应的存根处理逻辑
    const isStubbed = req.routeHandler !== undefined;
    if (!isStubbed) {
      throw new Error(`检测到未存根的XHR请求：${req.method} ${req.url}`);
    }
  });
});

方式二：针对旧版cy.route()的兼容方案 #

如果你还在使用旧版的cy.route()，可以借助cy.server()的事件监听来实现：

beforeEach(() => {
  cy.server({
    enable: true,
    // 监听每一个发起的请求
    onRequest: (req) => {
      // 检查当前请求是否匹配我们预先定义的存根路由
      const hasMatchingStub = Cypress.$.grep(cy.state('routes'), (route) => {
        return route.method === req.method && route.url.test(req.url);
      }).length > 0;

      if (!hasMatchingStub) {
        throw new Error(`未存根的XHR请求被发起：${req.method} ${req.url}`);
      }
    }
  });

  // 定义你的存根路由
  cy.route('GET', '/api/users', 'fixture:users.json').as('getUsers');
});

额外小提示 #

• 别忽略那些第三方请求，比如埋点、统计类的接口，这些也需要要么存根，要么加入白名单，不然测试会直接失败。
• 如果确实有个别请求需要访问真实服务器（特殊场景），可以在全局拦截器里加个白名单逻辑：

  cy.intercept('*', (req) => {
    // 允许访问的请求列表
    const allowedUrls = ['https://your-trusted-domain.com/analytics', '/api/health-check'];
    const isAllowed = allowedUrls.some(url => req.url.includes(url));
    const isStubbed = req.routeHandler !== undefined;
    
    if (!isStubbed && !isAllowed) {
      throw new Error(`未存根且未被允许的XHR请求：${req.method} ${req.url}`);
    }
  });
  

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