Question

我正在尝试测试一个在被点击时应该调用函数 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> 但它仍然不起作用

Answer 1

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

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

Answer 2

您的测试是否有可能在 deleteTag 函数完成之前先结束？

你可以试试waitForElementToBeRemoved。

Vue 测试库 - fireEvent.click() 不起作用

2 个答案: