Vue: emitted custom event not triggering spy

[jon-karlsen]

I have a problem wherein a spy passed to a component A to verify that an event was fired seems to have not been called, despite the fact that I can verify that the event is in fact emitted and that the same approach works in another test for a different component B. I'm by no means a Cypress expert, and the docs/Googling isn't getting me anywhere. This is proprietary code, so I'm regrettably not at liberty to share a complete repro.

Setup:

// support/component.ts

type MountParams  = Parameters<typeof mount>
type OptionsParam = MountParams[ 1 ] & { router? : Router }

declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace Cypress {
        interface Chainable {
           /**
            *      Helper mount function for Vue Components
            * 
            *      @param component    Vue Component or JSX Element to mount
            *      @param options      Options passed to Vue Test Utils
            * 
            */
            mount( component : any , options? : OptionsParam ) : Chainable<any>
        }
    }
}

Cypress.Commands.add( 'mount' , ( component , options = {} ) => {
    options.global         = options.global         || {}
    options.global.plugins = options.global.plugins || []
  
    if ( !options.router ) {
      options.router = createRouter( {
        routes  : routes
      , history : createMemoryHistory()
      } )
    }

    options.global.plugins.push( {
      install( app ) {
        app.use( options.router as never )
        app.use( i18n )
      }
    } )
  
    return mount( component , options )
} )

This works (some code omitted:

// B.cy.ts

    it( 'emits a event `click` when clicked' , () => {
        const clickSpy = cy.spy().as( 'clickSpy' )

        cy.mount( PrimaryBtnComponent 
                , { 
                    props : {
                        onClick : clickSpy
                    }      
                } )

        cy.get( 'button' )
          .click()

        cy.get( '@clickSpy' )
          .should( 'have.been.calledOnce' )
    } )

// B.vue

<script setup lang="ts">

defineEmits<{ 
    ( e : 'click', value: void ) : void 
}>()

</script>


<template>

    <button 
        @click="$emit( 'click' )"
    >
                           
</template>

This does not work:

// A.cy.ts

    it( 'emits a single `deleteField` event when field delete button pressed' , function() {
        const onFieldDeletedSpy = cy.spy().as( 'onFieldDeletedSpy' )

        cy.mount( CustConfigFormComponent 
            , {
                props : {
                    ...
                  , deleteField: onFieldDeletedSpy
                }
            } )

        cy.get( '[data-cy=company-8-fields]' )
          .first()
          .scrollIntoView()
          .click()

        cy.contains( 'Remove Field' )
          .first()
          .click()

        cy.get( '@onFieldDeletedSpy' )
          .should( 'have.been.calledOnce' )
    } )

// A.vue

<script lang="ts">

export default {
    inheritAttrs : false
}

</script>

<script setup lang="ts">

const emit = defineEmits<{
    ( e : 'deleteField' value : FieldDeleted : void
}>()

const onFieldDeleted = ( e : FieldDeleted ) : void => {
    console.log( e )

    emit( 'deleteField' , e )
}

</script>

<template>
        
    <FieldConfigAccordionComponent
           @delete-field="onFieldDeleted"
    />

</template>

Result: Timed out retrying after 4000ms: expected onFieldDeletedSpy to have been called exactly once, but it was never called. A is a greatly more complex component and the button element emitting the root event is nested several layers deep, but the event is re-emitted on every in-between level, and the desired effect can be seen by manually testing in a browser. The call to console.log in onFieldDeleted of A also triggers.

The goal of this test is to ensure that the component in question emits a single event on a certain button press. The event destination is this component's parent level, so on this level, I have no result to verify.

[jon-karlsen]

For anyone else in the same situation, I've managed to solve this by rewriting the assertion as such:

cy.contains( 'Remove Field' )
  .first()
  .click()
  .then( () => {
    cy.wrap( Cypress.vueWrapper.emitted( 'deleteField') ).should( 'have.length' , 1 )
   } )

Source: https://stackoverflow.com/a/70213943/7041984

However, I'm still curious as to why this approach works where my original one did not, and where it's documented.

[jon-karlsen]

Sorry for the late reply @lmiller1990 --I don't have much spare time, but I'd like to help.

At a glance, it looks like the documentation here is the correct approach. Should the spy example basically be replaced with the wrapper approach?

[lmiller1990]

Hm good question. I personally prefer to avoid the wrapper and just do it the way that also works for E2E and other frameworks:

it( 'emits a event `click` when clicked' , () => {
  const clickSpy = cy.spy().as( 'clickSpy' )

  cy.mount( PrimaryBtnComponent, { 
    props : {
      onClick : clickSpy
    }      
  })

  cy.get( 'button' ).click().then(() =>  {
    cy.get( '@clickSpy' ).should.have.been.calledOnce()
  })
}) 

I prefer this since it doesn't use and framework-specific APIs - any developer would be familiar with cy.get, then, etc. WDYT? I do agree the docs should be more consistent. We probably need a kind of cookbook, something like Vue Testing Handbook but for Cypress.

[jon-karlsen]

I like your approach, but I'm unable to get it to actually work:

// CustConfigFormComponent.vue

...

const emit = defineEmits<{
    ( e : 'deleteField' , value : FieldDeleted ) : void
}>()

...

    it( 'emits a single `deleteField` event when field delete button pressed' , function() {
        const _config          = cConfig 
            , _captureAlgo     = right( this[ captureAlgos ] )
            , _docFlows        = right( this[ docFlows ] )
            , _fieldFormatters = right( this[ fieldFormatters ] )
            , _spy             = cy.spy().as( 'deleteFieldSpy' )

        cy.mount( CustConfigFormComponent 
            , {
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                props : {
                    currentId       : 8
                  , config          : _config 
                  , docFlows        : _docFlows 
                  , docFlowName     : docFlows
                  , captureAlgo     : _captureAlgo 
                  , captureAlgoName : captureAlgos
                  , fieldFormatters : _fieldFormatters 
                  , index           : 3
                  , deleteField     : _spy 
                }
            } )

        cy.get( '[data-cy=company-8-fields]' )
          .first()
          .scrollIntoView()
          .click()

        cy.contains( 'Remove Field' )
          .first()
          .click()
          .then( () => {
            cy.get( '@deleteFieldSpy' ).should( 'have.been.calledOnce' )
          } )
    } )

Am I missing something obvious? I'm not sure it has any bearing, but the original event is fired from a direct child component of the SUT, which the latter then re-emits.

As an aside, I'd be interested in contributing to such a cookbook. I also have some issues with TS and Cypress, and it'd be nice to dedicate some time to working those kinks out. Very happy if those efforts could help others, too.

[lmiller1990]

I think you need to pass

onDeleteField: _spy 

since Vue compiles emit('deleteField') to props.onDeleteField(). Try that.

[jon-karlsen]

Thanks, that does the trick. I'll make a PR tomorrow to update the docs to use an example in this style.