javascript - 赛普拉斯：如何监视通过单击按钮调用的方法

Question

我正在使用 Vue3 + Vite + Cypress。使用 Vue3 script setupSFC 语法。我有一个组件：

<template>
  <div>
    <button data-cy="testBtn" @click="btnClick()">
      Click
    </button>
  </div>
</template>

<script setup lang="ts">
function btnClick():void {
  console.log('clicked');
}
</script>

我如何进行监视，btnClick以便我可以断言它已被调用cy.get('[data-cy="testBtn"]').click();？
我努力了：

describe('Test', () => {
  it.only(`Test`, () => {
    mount(TestComponent, {
      props: {
        device: TestComponent
      }
    });

    cy.vue().then((wrapper) => {
      const test = cy.spy(wrapper.vm, 'btnClick');
      cy.get('[data-cy="testBtn"]').click();
      expect(test).to.be.called;
    });
  });
});

但我得到一个错误Attempted to wrap undefined property btnClick as function

Answer 1

cy.spy()与组件测试一起使用时看起来像一个错误。

这个“手动”间谍为我工作

it.only('', () => {
  mount(TestComponent)
    .then(() => {                  // wait for mount to complete

      // spy on click handler
      let called;
      const original = Cypress.vueWrapper.vm.btnClick
      Cypress.vueWrapper.vm.btnClick = () => {
        called = true
        original()
      }

      cy.get('[data-cy="testBtn"]').click()
        .then(() => expect(called).to.eq(true))
    })
});