Vue 测试库 - fireEvent.click() 不工作答案

【问题标题】：Vue Testing Library - fireEvent.click() not workingVue 测试库 - fireEvent.click() 不工作
【发布时间】：2021-03-29 12:36:45
【问题描述】：

我正在尝试测试一个在单击时应该调用函数 deleteTag() 的元素，但由于某种原因，无论我做什么，fireEvent.click() 都不起作用。用于在我的输入字段中输入文本的其他方法（例如 fireEvent.input()）完美运行，这里是我的组件：

<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>

和测试：

  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
    
  })

我对不同元素的测试中的第一个 fireEvent.click 效果很好。我什至尝试将<v-chip> 元素更改为<v-btn>，但它仍然没有工作

【问题讨论】：

标签： javascript unit-testing vue.js testing jestjs

【解决方案1】：

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

这对我们有用。刚遇到同样的问题。
点击处理程序不在芯片上，而是在其中的按钮上。

【讨论】：