Vue Testing Library – fireEvent.click() not working

I’m trying to test a element that should call a function deleteTag() when being clicked on, but for some reason fireEvent.click() doesn’t work no matter what I do. other methods such as fireEvent.input() for inputing text in my input field work perfectly, here my component:

<v-chip data-testid="tagdel"
    v-for='(item, i) in value[field.key]' :key='i'
    close
    class='ma-2'
    color='primary'
    close-icon='mdi-delete'
    @click:close='deleteTag(i)'
  >
  {{item}}
</v-chip>

and the test:

  it('Clicking on the element should remove the tag', async () => {
    const { getByTestId, getByText } = renderWithVuetify(TagComponent, {
      propsData: props
    })

    await fireEvent.update(getByTestId('taginput'), 'some tag name') // this works perfectly fine
    await fireEvent.click(getByTestId('tagadd')) // this works perfectly fine
    getByText('some tag name') // this works perfectly fine

    await fireEvent.click(getByTestId('tagdel')) // doesn't click for some reason
    
  })

the first fireEvent.click in my test on a different element works perfectly fine. I even tried chaning the <v-chip> element to a <v-btn> but it still didnt work

47 thoughts on “Vue Testing Library – fireEvent.click() not working”

Leave a Comment