Vue3+Quasar组件中依赖props的线性进度元素测试问题

1. 修正组件挂载的props传递方式 #

Vue Test Utils中，组件props必须放在props选项下，不能直接作为mount的顶层参数：

let wrapper = mount(MyComponent, {
  props: { // 用props对象包裹传递的属性
    total: 100,
    tested: 60
  }
});

2. 正确查找Quasar组件 #

q-linear-progress是Vue组件，渲染后的DOM并非<q-linear-progress>标签，因此不能用标签选择器查找。需通过组件的官方注册名称查找：

// Quasar组件的注册名称为驼峰式的QLinearProgress
const progressComponent = wrapper.findComponent({ name: 'QLinearProgress' });

3. 获取组件的value props（而非DOM属性） #

:value是Vue组件的props，不属于DOM元素属性，无法通过attributes()读取。直接通过组件实例的props()方法获取：

const actualValue = progressComponent.props('value');
// 需提前导入percentageCounted函数，否则测试会报错
expect(actualValue).toBe(percentageCounted(60, 100)/100);

4. 修正语法错误 #

原测试代码中expect语句多了一个闭合括号，需删除冗余括号：

// 错误写法：expect(progressBar.attributes("value"))).toBe(...)
// 正确写法：
expect(actualValue).toBe(percentageCounted(tested, total)/100);

完整修正后的测试代码 #

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import { percentageCounted } from '@/path/to/your/function'; // 导入百分比计算函数

it('computes correct progress value', () => {
  const total = 100;
  const tested = 60;
  
  const wrapper = mount(MyComponent, {
    props: {
      total,
      tested
    }
  });

  const progressComponent = wrapper.findComponent({ name: 'QLinearProgress' });
  const actualValue = progressComponent.props('value');

  expect(actualValue).toBe(percentageCounted(tested, total)/100);
});

如果仍找不到组件，可打印wrapper.html()查看渲染后的DOM结构，确认进度条的实际渲染结果，或检查Quasar组件是否在测试环境中正确注册。

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