Cypress组件测试无法捕获Vue3组件发出的update事件

问题原因 #

你遇到的核心问题是在组件挂载的on选项中直接使用cy.spy()会导致Spy无法正确绑定到事件监听上。cy.spy()返回的是Cypress命令链对象而非原生函数，Vue绑定事件时无法识别该对象，最终导致事件触发时Spy未被调用。

可行解决方案 #

方案1：提前创建Spy并传入事件监听 #

先在测试逻辑外创建Spy实例，再将其绑定到组件的事件配置中：

it.only('should emit an event when the value is changed', () => {
  const mockData = ["one", "two", "three"];
  // 提前创建Spy并命名
  const updateModelValueSpy = cy.spy().as('updateModelValueSpy');

  cy.intercept('GET', '/v1/product', {
    statusCode: 200,
    body: mockData,
  }).as('getProductData');

  cy.mount(ProductPicker, {
    props: { modelValue: null },
    on: {
      // 使用提前创建的Spy实例
      'update:modelValue': updateModelValueSpy,
    },
  }).then(() => {
    cy.get('select').select('two');
    // 无需硬编码等待，Cypress会自动重试断言
    cy.get('@updateModelValueSpy')
      .should('have.been.called')
      .and('have.been.calledWith', 'two');
  });
});

方案2：直接验证v-model的props更新 #

如果你的核心需求是验证v-model的更新效果，也可以跳过Spy，直接获取组件实例验证props变化：

it.only('should update modelValue when selection changes', () => {
  const mockData = ["one", "two", "three"];

  cy.intercept('GET', '/v1/product', {
    statusCode: 200,
    body: mockData,
  }).as('getProductData');

  cy.mount(ProductPicker, {
    props: { modelValue: null },
  }).then(() => {
    cy.get('select').select('two');
    // 通过Cypress vue命令获取组件实例，验证props更新
    cy.vue().its('props.modelValue').should('equal', 'two');
  });
});

关键注意事项 #

• 禁止在挂载配置中直接调用cy.spy()：必须提前创建Spy实例再传入事件监听，否则无法正确绑定。
• 移除硬编码等待cy.wait(500)：Cypress断言支持自动重试，只要组件的emit是同步或可追踪的异步操作，无需手动等待。
• 优先验证调用参数：用have.been.calledWith替代单纯的have.been.called，能更精准地验证事件传递的参数是否符合预期。

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