I'm currently facing some challenges with my initial VueJS unit tests using Jest.
Although I grasp the concept and have already executed my first set of successful tests, I find myself pondering over the question of "What aspects should I test?"
For instance, within my Component, there exists an element:
<img v-if="!hasHoverEffect"
:alt="model.alt"
:src="src"
:style="styles"
:title="model.title"
:class="model.shadow"
class="img-fluid centered"/>
The dilemma lies in determining what precisely to evaluate here. As of now, I've drafted 2 tests:
test('renders by default', () => {
const wrapper = factory.default();
const img = wrapper.find('div.position-relative > img');
expect(img.element).toBeDefined();
});
test('does not render if model.hovereffect is true', () => {
const wrapper = factory.default({
propsData: {
model: {
hovereffect: 'true'
}
}
});
const img = wrapper.find('div.position-relative > img');
expect(img.element).not.toBeDefined();
});
Contemplating whether the next step should involve
test('by default alt is empty', () => {