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

Question

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

Using a find option object, Vue Test Utils allows for selecting elements by a name of component on wrapper components.

给出的例子是

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

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

在我的组件中我有：

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

在我的测试中我有：

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

此 returns undefined 而不是按钮。我做错了什么？

Answer 1

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

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

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

您可以使用您的语法按名称找到该组件。