如何自动化测试React应用的API调用次数是否符合预期

针对你需要精确校验window.fetch发起的接口调用次数、不接受非官方hack方案的需求，有两类成熟方案可选：

方案1：替换为Playwright（和Cypress定位一致的E2E测试工具） #

Playwright和Cypress同属现代前端E2E测试赛道，原生内置全链路网络请求监听能力，从产品设计层面就支持请求计数、请求内容校验的需求，不需要任何魔改。
它的请求监听逻辑在浏览器上下文初始化阶段就会生效，页面加载第一时间发起的fetch请求也不会漏记，完全可以捕获接口重复调用的问题。
基础校验逻辑示例：

test('登录态访问站点仅发起3次配置接口调用', async ({ page }) => {
  const configApiRequestList = []
  // 注册请求监听，匹配所有配置类接口
  page.on('request', req => {
    if (req.url().includes('/api/config/')) {
      configApiRequestList.push(req)
    }
  })

  // 注入登录态后访问目标页面
  await page.addInitScript(() => localStorage.setItem('auth_token', 'test_user_token'))
  await page.goto('/')
  await page.waitForLoadState('networkidle')

  // 精确断言调用总次数，多一次、少一次都会直接失败
  expect(configApiRequestList.length).toBe(3)
  // 还可以追加断言，校验每个调用的地址、方法、入参完全符合预期
})

方案2：保留Cypress栈，搭配MSW（Mock Service Worker）实现 #

如果你不想迁移现有Cypress测试资产，可以用MSW补全精准计数能力。MSW是基于Service Worker实现的网络拦截工具，官方原生提供Cypress集成支持，所有用法都在公开文档中有明确说明，不属于非官方hack。
它的拦截逻辑和业务代码完全解耦，不会干扰正常请求发送，也不会漏记页面初始化阶段的fetch请求。
基础实现逻辑示例：

// 在Cypress全局支持文件中初始化计数逻辑
let apiCallCounter = {}
beforeEach(() => {
  apiCallCounter = {}
  // 注册MSW拦截，统计所有配置类接口的调用次数
  cy.msw.intercept('GET', '/api/config/*', req => {
    const path = req.url.pathname
    apiCallCounter[path] = (apiCallCounter[path] || 0) + 1
    req.passthrough()
  })
})

// 测试用例中的断言逻辑
it('登录态访问首页配置接口调用次数符合预期', () => {
  cy.login('test_user')
  cy.visit('/')
  cy.waitForNetworkIdle().then(() => {
    const totalConfigApiCalls = Object.entries(apiCallCounter)
      .filter(([path]) => path.startsWith('/api/config/'))
      .reduce((total, [, count]) => total + count, 0)
    // 精确断言次数，重复调用会直接触发失败
    expect(totalConfigApiCalls).to.equal(3)
  })
})

选型参考 #

• 如果后续计划迭代E2E测试能力，优先选择Playwright，它在网络监听、跨浏览器测试、执行稳定性上的原生设计更适配这类精准校验场景
• 如果要最大化复用现有Cypress用例，直接选择官方集成的MSW方案即可，不需要改动现有业务代码和大部分测试逻辑

不建议用Cypress自带的cy.intercept做这类精确计数：它对页面初始化阶段发起的fetch请求存在偶发漏统计的问题，这属于Cypress本身的能力边界，靠配置很难彻底解决。

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