Vue/Jasmine测试场景下不使用ref获取目标DOM元素的方法咨询

你完全不需要为了测试修改业务代码新增ref，基于Vue Test Utils的原生能力和现有组件特征就可以完成元素查询，常用方法如下：

• 方法1：使用Vue Test Utils自带的选择器查询（最推荐）
  你组件中的目标元素绑定了CSS Module类$style.dateOf，可以直接在测试中拿到编译后的类名进行查询：

await this.wrapper.setProps({ hasName: true });
await this.wrapper.vm.$nextTick();
// 查找目标元素对应的Wrapper实例
const dateOfWrapper = this.wrapper.find(`.${this.wrapper.vm.$style.dateOf}`);
// 若需要获取原生DOM元素
const nativeDom = dateOfWrapper.element;
// 若查询的是自定义组件，可通过vm属性拿到组件实例
const componentVm = dateOfWrapper.vm;
// 可直接调用exists()方法判断元素是否渲染成功
console.log(dateOfWrapper.exists()) // 输出true

• 方法2：通过组件根元素做原生DOM查询
  如果你不想用Vue Test Utils的封装方法，也可以直接从vm的根元素调用原生querySelector查询：

await this.wrapper.setProps({ hasName: true });
await this.wrapper.vm.$nextTick();
const dateOfDom = this.wrapper.vm.$el.querySelector(`.${this.wrapper.vm.$style.dateOf}`);

• 方法3：按文本/其他特征查询
  如果目标元素有固定的文本内容，也可以直接按文本匹配查询：

// 匹配文本为test的div元素
const dateOfWrapper = this.wrapper.find('div:contains("test")');

如果后续元素上有其他可标识的属性（比如自定义data属性、name属性等），也可以用属性选择器直接查询，不需要额外加ref。

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