'How do I test v-for in vuejs which contains mapgetters

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 &amp; 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,
    );
  });
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source