In this component I want to test the v-for with and without array. So in my current situation, i set the data with empty array and based on that it should return false. Because of the fact that it cannot find the data-test attribute. Since I am using the mapGetters inside the computed method, it probably gives me a weird error when I run the Jest testing. It shows the following error:
TypeError: Cannot read properties of null (reading 'destroy')
10 |
11 | afterEach(() => {
> 12 | wrapper.destroy();
| ^
13 | });
14 |
15 | it('Check v-for loop', () => {
Since I am new with Jest testing in Vue, could someone here help me to do it in the right way to avoid that error.
<template>
<div>
<h4>Sitemap</h4>
<ul>
<li>
<nuxt-link to="/">Druktebeeld: Homepage & Kaart</nuxt-link>
<h4>Passanten</h4>
<ul>
<li
v-for="location in passersBy"
:key="`passers-by-homepage-${location.id}`"
data-test="passerBy-location"
>
<nuxt-link :to="`/map/${encodeURIComponent(location.id)}`"
>{{ location.name }}
</nuxt-link>
</li>
</ul>
<h4>Parkeren</h4>
<ul>
<li
v-for="location in parking"
:key="`parking-homepage-${location.id}`"
>
<nuxt-link :to="`/map/${encodeURIComponent(location.id)}`"
>{{ location.name }}
</nuxt-link>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters('locations', ['parking', 'passersBy']),
},
};
</script>import { shallowMount } from '@vue/test-utils';
import TabSitemap from '../tabbedPages/info/TabSitemap.vue';
describe('TabSitemap.vue', () => {
let wrapper = null;
beforeEach(() => {
wrapper = shallowMount(TabSitemap);
});
it('Check v-for loop', () => {
wrapper.setData({ 'passerBy-location': [] });
expect(wrapper.find('[data-test="passerBy-location"]').exists()).toBe(
false,
);
});
});