Vue.js Quickstart - Spy Emitter

[Akifcan]

Subject

Vue Component Testing

Description

Hello I followed this sample for spy emitters in vue.js.

it('clicking + fires a change event with the incremented value', () => {
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(Stepper, { props: { onChange: onChangeSpy } })
  cy.get('[data-cy=increment]').click()
  cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})

I tried to register my emitter under props property. But it didn't work cy.mount(Stepper, { props: { onChange: onChangeSpy } }) then I switched props with emit and worked.

This is my code:

import AppLeading from '../common/AppLeading.vue'

it('should emit the onSearch event when input change', () => {
  const DEBOUNCE_TIME = 500

  const onSearchSpy = cy.spy().as('onSearchSpy')

  cy.mount(AppLeading, {
    props: {
      title: 'Diller',
      primaryButtonTitle: 'Yeni Dil Ekle',
    },
    emits: { //props not worked here
      onSearch: onSearchSpy,
    },
  })
  cy.get('input').should('be.visible')
  cy.get('input').type('kediler')
  cy.wait(DEBOUNCE_TIME + 100)
  cy.get('@onSearchSpy').should('have.been.calledWith', 'kediler')
})

[warrensplayer]

@Akifcan Please provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

Forking Cypress Test Tiny makes sharing a reproducible example easier to share and easier for our engineers to replicate your issues. This method also keeps the reproduction as simple as possible, which helps us eliminate potential causes and noise from the investigation.

[mike-plummer]

@Akifcan I've verified that the referenced example works as described in the latest version of Vue, so there must be something unique about your component/project that isn't evident from the code you've shared. It may be that you're using an older version of Vue or another library that is changing the behavior of your component. Since this doesn't appear to be a bug in Cypress you should reach out to the community on Discord to see if they can help you get your component test working as expected