vue-test-utils 查找按钮不适用于查找选项对象

Question

根据docs，可以通过名称找到包装器的元素。

使用查找选项对象，Vue Test Utils 允许通过包装组件上的组件名称来选择元素。

给出的例子是

const buttonWrapper = wrapper.find({ name: 'my-button' })
buttonWrapper.trigger('click')

在我的 vue 组件中，我有三个按钮。我想测试所有三个按钮的功能，但我不想使用wrapper.findAll("button").at(1) 选择第二个按钮，因为当按钮的顺序改变时，测试失败。所以我决定为每个按钮命名，并使用选项对象按名称查找它们。

在我的组件中我有：

<button class="button is-success" name="save-button">Opslaan</button>

在我的测试中，我有：

const button = wrappedAddSubject.find({name:"save-button"})

这将返回 undefined 而不是按钮。我做错了什么？

Answer 1

我认为“name”是指组件的名称，而不是html元素的属性“name”。

例如，如果你有一个组件：

Vue.component('save-button', {
  template: "<button>Click</button>
})

你可以使用你的语法通过它的名字找到这个组件。