使用@Vue/test-utils时findAll()始终返回0个元素的问题

问题重现 #

开发带有星星图标的Vue3反馈评分组件时，通过v-for根据length属性渲染对应数量的svg星星，但在测试环节，调用wrapper.findAll('svg')始终返回0个元素，尝试.rating-container svg、.polygon等多种选择器均无效。

组件代码（VueRating.vue） #

<template>
  <div class="rating-container">
    <svg
      v-for="item in length"
      :key="item"
      xmlns="http://www.w3.org/2000/svg"
      width="23"
      height="23"
      viewBox="0 0 100 100"
    >
      <polygon
        class="polygon"
        ref="polygonRef"
        points="50,0 64,36 100,42 72,64 78,100 50,80 22,100 28,64 0,42 36,36"
        fill="none"
        stroke="#000"
        stroke-width="1"
      />
    </svg>
  </div>
</template>

<script setup>
import { defineProps} from "vue";

const props = defineProps({
  length: {
    type: Number,
    default: 5,
  }
});
</script>

测试代码（VueRating.spec.js） #

import { mount } from "@vue/test-utils";
import VueRating from "../../src/components/VueRating.vue";

describe("VueRating.vue", () => {
  it("should render props.length star(s) when mounted",() => {
    const wrapper = mount(VueRating, {
      props: {
        length: 3,
      },
    });
    expect(wrapper.findAll("svg").length).toBe(3);
    //expect(wrapper.findAll(".rating-container svg").length).toBe(3);
    //expect(wrapper.findAll(".polygon").length).toBe(3);
  });
});

解决方案 #

• 检查组件导入路径
  确认测试文件中组件的导入路径与实际文件位置匹配，比如../../src/components/VueRating.vue是否指向正确的组件文件。路径错误会导致挂载空组件，无法找到目标元素。

• 打印渲染内容排查
  在测试中添加console.log(wrapper.html())，查看组件实际渲染的DOM结构，确认svg是否被正确渲染：

it("should render props.length star(s) when mounted",() => {
  const wrapper = mount(VueRating, {
    props: {
      length: 3,
    },
  });
  console.log(wrapper.html()); // 输出实际渲染的DOM内容
  expect(wrapper.findAll("svg").length).toBe(3);
});

如果输出内容中没有.rating-container或svg元素，说明组件未正确挂载，需重点排查路径和组件导出逻辑。

• 验证依赖版本兼容性
  确保@vue/test-utils版本≥2.0.0，该版本开始全面支持Vue3和<script setup>语法。若版本过低，执行以下命令更新：

npm install @vue/test-utils@latest --save-dev

• 确认props传递有效性
  通过wrapper.props()检查组件是否正确接收length属性：

console.log(wrapper.props('length')); // 预期输出3

若输出不符合预期，需检查props传递的语法是否正确（Vue3测试中props需放在props选项下，代码中写法正确）。

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