如何在Cypress测试中为API调用添加延迟以测试竞态条件？

别发愁啦，Cypress本身就提供了非常顺手的方式给特定API加延迟，比直接去stub window.fetch靠谱多了——毕竟cy.intercept()是专门在网络层处理路由拦截的，不管你的应用用fetch、axios还是其他HTTP库都能生效。

下面给你两种常用的实现方式：

1. 模拟响应并添加延迟 #

如果需要返回自定义的模拟数据，同时延迟响应，可以这么写：

// 拦截目标API，添加1.5秒延迟
cy.intercept('GET', '/api/your-target-endpoint', (req) => {
  setTimeout(() => {
    req.reply({
      statusCode: 200,
      body: {
        // 这里放你需要的模拟响应数据
        data: '模拟的返回内容'
      }
    });
  }, 1500); // 延迟时间，单位毫秒，这里是1.5秒
}).as('delayedMockApi');

2. 延迟真实API的响应 #

如果想保留真实的API返回内容，只是单纯延迟响应（更贴近真实测试场景），可以用req.continue()捕获真实响应后再延迟返回：

cy.intercept('GET', '/api/your-target-endpoint', (req) => {
  req.continue((res) => {
    // 延迟2秒后返回真实的API响应
    setTimeout(() => {
      res.send(res.statusCode, res.body);
    }, 2000);
  });
}).as('delayedRealApi');

测试时的配合用法 #

触发API请求后，你可以用cy.wait()等待延迟的API完成，再进行断言：

// 触发请求的操作，比如点击按钮
cy.get('#trigger-request-btn').click();

// 等待延迟的API请求结束
cy.wait('@delayedMockApi');

// 断言竞态条件下的页面状态
cy.get('#result-element').should('have.text', '预期的结果');

之前你尝试stub window.fetch效果不好，大概率是因为你的应用可能没有直接使用原生fetch，而是封装了HTTP请求工具（比如axios），这时候cy.intercept()的网络层拦截就会更可靠，能覆盖所有类型的HTTP请求。

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