So i am testing my quasar component , i want to test if it does render the q-carousel-slide i am adding the class "image" withing the q-carousel-slide but jest doesn't see it , the test doesn't pass , but when i put the "image" in the q-carousel just above the test pass, it seems that it is too deep for jest that it doesn't see the class
Here is my component
<template>
<q-card
class="my-card rounded"
@mouseover="hover = true"
@mouseleave="hover = false"
>
<q-carousel
class="rounded"
animated
v-model="slide"
ref="carousel"
:navigation="hover"
:arrows="hover"
infinite
style="width:270px; height:250px"
>
<template v-slot:navigation-icon="{ active, btnProps, onClick }">
<q-btn v-if="active" size="0.3em" icon="circle" color="white" flat round dense @click="onClick" />
<q-btn v-else size="0.3em" :icon="btnProps.icon" color="grey" flat round dense @click="onClick" />
</template>
//Here is the slide which contains image that i want to check if it is rendered correctly
<q-carousel-slide class="rounded image" v-for="img in imgArray" :key="img.id" :name="img.id" :img-src="img.source" />
//
</q-carousel>
<q-btn class="favorite" @click="favoris = !favoris" flat round color="white" text-color="red" :icon="favoris ? 'favorite_border' : 'favorite'" />
<q-card-section>
<div class="text-h6 title">{{title}}</div>
<div class="text-subtitle2 description">{{description}}</div>
</q-card-section>
</q-card>
</template>
testing
import { describe, expect, it,beforeEach,afterEach } from '@jest/globals';
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { mount, shallowMount } from '@vue/test-utils';
import CardLogement from 'src/components/CardLogement.vue';
installQuasarPlugin();
let wrapper:any = null;
beforeEach(() => {
wrapper = mount(CardLogement, {
props: {
maxImg : 5
}
});
})
afterEach(() => {
wrapper = null;
})
describe("card for each logement", () => {
it("has image", () => {
const imgArray = wrapper.findAll(".image")
expect(imgArray.length).toBe(1)
})
it("has favortie btn", () => {
const favoriteBtn = wrapper.findAll(".favorite")
expect(favoriteBtn.length).toBe(1)
})
it("has title & description", () => {
const title = wrapper.findAll(".title");
const description = wrapper.findAll(".description");
expect(title.length).toBe(1);
expect(description.length).toBe(1);
})
})