Cypress Vue Component Test Runner - 测试按钮点击已发出事件

Question

我无法弄清楚如何对 Vue 组件进行简单测试（使用 Cypress Component Test Runner）以查看单击按钮是否会导致发出事件

// MyButton.vue component
    <template>
      <Button
        data-testid="button"
        label="Click Button"
        @click="clickButton()"
      />
    </template>
    <script setup lang="ts">
    import { defineEmits } from "vue";
    const emit = defineEmits(["clickButtonEvent"]);
    
    function clickButton() {
      emit("clickButtonEvent");
    }
    </script>

// MyButton.spec.ts
    it.only("should emit an even when clicked", () => {
      const clickButtonSpy = cy.spy().as("clickButtonEvent");
    
      mount(FulfilButton, {
        global: {
          components: {
            Button,
          },
        },
      })
      .get('[data-testid="button"]')
      .click();
    
      cy.get("@clickButtonEvent").should("have.been.called");
    });

这不起作用 - 在我看到的控制台中

mount
get
-click

但是然后这个：

expect clickButtonEvent to have been called at least once, but it was never called

所以我想我没有正确连接这个 cy.spy - 大概是因为我没有把它作为安装的一部分？我需要做什么？按钮本身是一个 PrimeVue 按钮组件，但我很确定这不会阻止我进行此测试？

Answer 1

好吧，你根本没有勾搭间谍。

赛普拉斯 mount 命令与 vue-test-utils mount 具有相同的界面（它在底层使用 vue-test-utils）

在 vue-test-utils v1（对于 Vue 2）中，您可以使用 listeners mount option to attach the spy as demonstrated in

但由于您使用的是 Vue 3，因此 vue-test-utils v2 where listeners mount option was removed, probably your best option to use recommended API of the wrapper - emitted

这个例子取自 recent talk of Jessica Sachs (Cypress team member) (repo) 她做了这样的事情：

mount(FulfilButton, {
  global: {
    components: {
      Button,
    },
  },
})
.get('[data-testid="button"]')
.click()
.vue()
.then((wrapper) => {
  expect(wrapper.emitted('clickButtonEvent')).to.have.length(1)
})

注意 vue() 不是内置的 Cypress 命令。在此 demo/repo 中，它是由 Jessica 在 support file

中添加的

// ./cypress/support/index.js

Cypress.Commands.add('vue', () => {
  return cy.wrap(Cypress.vueWrapper)
})

你可以在不引入任何助手的情况下做一些非常相似的事情(example)

it('emits "increment" event on click', () => {
    cy.get('button')
    .click()
    .click()
    .then(() => {
      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'increment')
    })
  })

Cypress Vue Component Test Runner - 测试按钮点击已发出事件

Cypress Vue Component Test Runner - testing a button click has emitted an event

unit-testing

vue.js

cypress

cypress-component-test-runner