Cypress Vue组件测试Runner测试按钮点击触发emit事件失败如何解决

问题根因 #

你创建的cy.spy没有和组件抛出的clickButtonEvent自定义事件做绑定，组件触发emit时spy无法收到回调，该问题和你使用的PrimeVue按钮组件无关。

修复方案 #

在调用mount挂载组件时，通过props配置项传入和emit事件对应的回调即可，回调命名遵循on + 首字母大写的事件名的规则。另外注意你示例中测试代码挂载的FulfilButton和实际组件名MyButton不一致，需要修正为你实际使用的组件名。

修复后的测试代码如下：

// MyButton.spec.ts
it.only("should emit an event when clicked", () => {
  const clickButtonSpy = cy.spy().as("clickButtonEvent");

  mount(MyButton, { // 替换为你实际的组件名
    global: {
      components: {
        Button,
      },
    },
    // 新增props配置，绑定emit事件对应的回调
    props: {
      onClickButtonEvent: clickButtonSpy
    }
  })
  .get('[data-testid="button"]')
  .click();

  cy.get("@clickButtonEvent").should("have.been.called");
});

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