vue-test-utils使用find选项对象按name查找按钮返回undefined如何解决

你出现问题的核心原因是误解了find({ name: 'xxx' })选择器的适用范围：该API仅用于匹配 wrapper 内部Vue子组件声明的name选项，并非用来匹配原生HTML元素自带的name属性，因此你用该写法查找原生button元素自然会返回undefined。

可行的解决方法 #

• 方案1：直接用CSS属性选择器匹配原生按钮的name属性，写法最简单直接：

const button = wrappedAddSubject.find('button[name="save-button"]')

• 方案2（测试场景最佳实践）：给元素添加专门的测试标识data-testid，避免后续业务属性调整影响测试稳定性：
  组件内按钮代码调整为：

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

对应测试代码修改为：

const button = wrappedAddSubject.find('[data-testid="save-button"]')

内容的提问来源于stack exchange，提问作者KvdLingen