wrapper emitted() not working in vue test utils composition api

Viewed 156

I am trying to make a simple test to check that the button is emitting an event called "click" every time it is detected, the problem is that when I use wrapper.emitted('click') to validate that it is receiving it, it always arrives as an empty object... I don't know what I may be doing wrong.

Current versions: Vue: 3.2.31 Vitest: 0.7.12 Vite: 2.8.6 Vue/test-utils: 2.0.0-rc.17

<template>
  <button
    class="eci-button"
    :disabled="props.disabled"
    @click="handleClick"
  >
    {{ props.label }}
  </button>
</template>

<script setup lang="ts">
/* Interfaces and types */
interface Props {
  label: string
  disabled?: boolean
}

/* Props */
const props = withDefaults(defineProps<Props>(), {
  disabled: false
})

/* Events */
const emit =
  defineEmits<{ (e: 'click'): void }>()

/* Methods */
const handleClick = () => {
  emit('click')
}
</script>

<style lang="scss" src="./Button.scss"></style>

Test

test('should render and emit event at click', async () => {
    const label = 'Siguiente'

    const wrapper = mount(Button, {
      props: {
        label
      }
    })

    wrapper.trigger('click')

    expect(wrapper.emitted()).toHaveProperty('click')
  })

Result

enter image description here

1 Answers

OK, I found the problem... I am using happy-dom as test environment together with Vitest... the problem is that when you pass a property as "optional" for some reason it interprets it as if it was "true"... to explain myself...

I have a default prop "disabled" set to "false" which means that my button should print as:

in the DOM.. but, for some reason it interprets it as being true and that causes the "click" events not being executed.. i will keep looking for some fix for this, at the moment i have migrated for jsdom and solved.

Related