@Vue/test-utils: findAll() always returning 0 element

93 Views Asked by At

I'm building a feedback rating component with stars icons, but when I test to check if the correct number of stars are being rendered depending on the prop length, wrapper.findAll('svg') always returns 0 element. Here is the code:

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);
  });
});

Test failing in the console

Thank you!

I tried finding by multiple selectors but without avail

0

There are 0 best solutions below