[Vuejs]-Cypress Vue Component Test Runner – testing a button click has emitted an event

by

4👍

✅

Well, you are not hooking the spy at all.

The Cypress mount command has the same interface as vue-test-utils mount (it is using vue-test-utils under the hood)

In vue-test-utils v1 (for Vue 2) you can use listeners mount option to attach the spy as demonstrated in this answer

But since you are using Vue 3 and in turn vue-test-utils v2 where listeners mount option was removed, probably your best option to use recommended API of the wrapper – emitted

This example is taken from the recent talk of Jessica Sachs (Cypress team member) (repo) where she does something like this:

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

Note that vue() is not a build-in Cypress command. In this demo/repo it was added by Jessica in the support file

// ./cypress/support/index.js

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

You can do something very similar without introducing any helper (example)

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

Leave a comment