Cypress如何在断言后按顺序stub导入/自定义Hook函数

场景说明 #

• 业务页面包含一个按钮组件，组件会调用customHook，根据customHook返回的布尔值（false/true）动态切换按钮显示文本
• 组件初始渲染阶段，customHook返回false，此时按钮展示文本为xxxx
• 点击按钮后，customHook应返回true，按钮文本同步切换为yyyy

已尝试方案 #

• 执行mount挂载按钮组件（挂载阶段调用customHook，默认返回false）
• 执行断言，校验按钮文本为xxxx
• 对customHook做stub处理，使其返回true
• 执行cy.get("button").click()模拟点击按钮
• 再次执行断言，校验按钮更新后的文本为yyyy

异常表现 #

• 测试流程在初始文本断言步骤就执行失败，排查发现stub操作实际在初始断言执行前就已触发
• 如果移除stub逻辑，则只有点击后的文本断言会失败
• 核心问题：stub操作没有和断言按既定顺序执行

根因分析 #

顺序错乱的核心原因是Cypress命令采用异步队列机制：所有cy.xxx开头的命令会先统一入队，再按顺序异步执行。如果你把stub作为普通同步代码直接写在用例中，它会在命令入队阶段就立刻执行，完全不会等待前面的挂载、断言命令跑完，才会出现stub提前触发的问题。

解决方案 #

1. 把stub逻辑放入命令链的.then()回调中 #

所有需要按顺序执行的非Cypress内置操作，都要放到前一个命令的回调里，Cypress会保证前序命令（包括断言）执行完成后，才会运行回调内的逻辑。
参考代码：

import * as hookModule from '@/hooks/useCustomHook' // 以模块对象形式导入hook，保证stub能拿到正确引用
import Button from '@/components/Button'

it('按钮文本随hook返回值切换', () => {
  // 挂载组件
  mount(<Button />)
  // 初始状态断言
  cy.get('button').should('have.text', 'xxxx')
  // 等初始断言通过后，再执行stub
  .then(() => {
    cy.stub(hookModule, 'useCustomHook').returns(true)
  })
  // stub完成后触发重渲染，保证组件拿到hook的新返回值
  .rerender(<Button />)
  // 模拟点击
  cy.get('button').click()
  // 点击后状态断言
  cy.get('button').should('have.text', 'yyyy')
})

2. 关键避坑点 #

• 不要在测试文件顶部直接单独导入自定义Hook后做stub，要将整个Hook模块作为对象导入，否则stub无法修改组件内引用的Hook实现，会出现stub不生效的问题
• 对Hook做stub修改返回值后，必须触发组件重渲染，否则组件不会读取Hook的新返回值，后续断言依然会失败
• 所有依赖前序断言结果的操作，都不要作为同步代码直接写在命令链外部，必须放入.then()回调保证执行顺序

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