Vue Testing Library - fireEvent.click() not working

Question

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

escapedcat · Accepted Answer · 2022-02-06 09:00:28Z

2

const tagdelChip = await findByTestId('tagdel')
const removeButton = await within(tagdelChip).findByRole('button')
await fireEvent.click(removeButton)

This works for us. Just had the same issue.
The click handler isn't on the chip it's on the button within.

edited Feb 6, 2022 at 9:00

answered Jun 1, 2021 at 6:50

escapedcat

79610 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Testing Library - fireEvent.click() not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related