En este componente quiero probar el v-for con y sin matriz. Entonces, en mi situación actual, configuré los datos con una matriz vacía y, en base a eso, debería devolver falso. Por el hecho de que no puede encontrar el atributo de prueba de datos. Dado que estoy usando mapGetters dentro del método computado, probablemente me dé un error extraño cuando ejecuto la prueba Jest. Muestra el siguiente error:
TypeError: no se pueden leer las propiedades de nulo (leyendo 'destruir')
10 | 11 | afterEach(() => { > 12 | wrapper.destroy(); | ^ 13 | }); 14 | 15 | it('Check v-for loop', () => {Como soy nuevo con las pruebas de Jest en Vue, ¿alguien podría ayudarme a hacerlo de la manera correcta para evitar ese 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, ); }); });