在Cypress中使用嵌套cy.intercept模拟请求数据时出错

问题出在你在cy.intercept的请求处理函数里调用了另一个cy.intercept——Cypress不允许在命令的回调（尤其是拦截的处理函数）中嵌套cy.系列命令，这会打破它的命令队列机制。

正确的做法是维护一个共享的数据源变量，让GET拦截动态返回这个变量的当前值，POST拦截只负责更新这个变量，不需要重新创建拦截。

修改后的代码如下：

// 声明一个可修改的变量存储fixture数据
let currentItems: any[];

// 先加载fixture数据到变量中
cy.fixture('items').then((items) => {
  currentItems = [...items]; // 深拷贝避免修改原fixture文件
});

// 先设置GET请求的拦截，动态返回currentItems的当前值
cy.intercept('GET', '**/loadData**', (req) => {
  req.reply(currentItems);
}).as('loadDataRequest');

// 设置POST删除请求的拦截，负责更新数据源
cy.intercept('POST', '**/delete', (req) => {
  const itemId = req.body.itemId;
  // 更新共享变量，移除目标项
  currentItems = currentItems.filter(item => item.id !== itemId);
  // 正常响应POST请求（根据后端实际响应格式调整）
  req.reply({ success: true });
}).as('delete');

关键说明： #

• 共享变量currentItems：用来存储当前的列表数据，POST请求处理时修改它，GET拦截会自动返回最新值。
• GET拦截的动态响应：使用回调函数(req) => req.reply(currentItems)，每次GET请求触发时都会读取currentItems的当前状态，不需要重新创建拦截。
• 避免修改原fixture：用[...items]深拷贝fixture数据，防止测试过程中修改原始文件。

这样就能实现：发送POST删除请求后，后续的GET请求会返回移除目标项后的更新数据，同时不会触发Cypress的命令嵌套错误。

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