首页 > 解决方案 > 使用 vue 3 和 vue 测试工具在测试中引用本机 UI 元素,而不向 UI 元素添加属性

问题描述

问题:如何在 vue 3 和 vue test utils 中引用原生 UI 元素而不向该 UI 元素添加额外的属性?

在使用vue 3vue test utils测试 vue 组件时,我注意到并没有真正优雅的方式来查找 UI 元素。从 Vue 3 开始,Vue Test Utils 不再提供在原生 UI 元素(例如按钮)上使用 ref 属性的方法。

我知道这些解决方案:

<button data-test="button" ></button> or <button class="button"> </button>

但是仅仅为了测试组件而向组件添加额外的属性或类并不是一个解决方案。此外,测试引发的错误也不是很具有描述性。例如在测试事件时 Error: Cannot call trigger on an empty DOMWrapper.

标签: mocha.jschaivuejs3vue-test-utils

解决方案


推荐阅读