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);
});
});
Thank you!
I tried finding by multiple selectors but without avail