cypress-spy-emit.ts

cy.get('.button').click().then(() => {
  cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'click-forgot-password-link')
})

@lmiller1990 long time no talk 🎉

Is this still the recommended way to check for emitted events with Component Test Runner? I can't find up-to-date docs that don't feel like a hack.

Also, how would I also check for a payload in the emitted event, like { email: '[email protected]' }

Hi @adamdehaven,

This example is pretty small - you could do it this way, though. I am generally not a fan of using vueWrapper in my tests - if you have a more "real world" example, I'd be able to give you better advice!

@lmiller1990
Here’s a full spec example:

it("emits a 'register-success' event with a payload on successful registration", () => {
    mount(KongAuthRegister)

    cy.intercept('POST', '**/register', {
      body: {
        organizationID: '187e2b65-ec69-421c-a7ba-3e946c4e5077',
      },
    }).as('register-request')

    cy.getTestId(testids.fullName).type('Player One')
    cy.getTestId(testids.organization).type('Test Organization')
    cy.getTestId(testids.email).type('[email protected]')
    cy.getTestId(testids.password).type('TestPassword1!')
    cy.getTestId(testids.agreeCheckbox).check()
    cy.getTestId(testids.form).submit()

    cy.wait('@register-request').its('response.body').should('have.property', 'organizationID').then(() => {
      // Check for emitted event
      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'register-success').then(() => {
        cy.wrap(Cypress.vueWrapper.emitted('register-success')[0][0]).should('have.property', 'email')
        cy.wrap(Cypress.vueWrapper.emitted('register-success')[0][0]).should('have.property', 'fromInvite')
      })
    })
  })

The actual component is wrapped in a Vue 3 custom element .ce.vue and is re-emitted with a body that looks like this:

{
  email: '[email protected]',
  fromInvite: false,
}

Kind of related, it looks like all events emitted from .ce.vue file are wrapped in an array? I end up having to do Cypress.vueWrapper.emitted('register-success')[0][0]

How would you access the emitted event (and it’s payload) instead?

Vuetify's next branch has a bunch of Cypress component testing examples. Button. They use TSX but you can do something like this:

const onRegister = cy.stub()

mount(KongAuthRegister, {
  props: { 
    onRegisterSuccess: onRegister
  }
})

cy.intercept('POST', '**/register', {
  body: {
    organizationID: '187e2b65-ec69-421c-a7ba-3e946c4e5077',
  },
}).as('register-request')

// stuff ...

cy.wait('@register-request').its('response.body').should('have.property', 'organizationID').then(() => {
  // Check for emitted event
  expect(onRegister).to.have.been.calledWith(......) // <================== your object here??
})

The trick is Vue turns @register-success into an onRegisterSuccess props when it compiles.

Example: lmiller1990/vue-3-cypress-vite#2