Tester un composant qui utilise le store me retourne undefined avec mapgetters

J’aimerais tester chaque composant de mon app, on trouve pas mal d’exemple sur internet mais qui n’ont plus l’air d’être d’actualité : javascript - How Test MapGetter - Stack Overflow. createLocalVue à l’air de ne plus être utilisé dans les nouvelles versions de vue,Je voulais donc savoir comment tester un composant qui utilise le store.

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
},

Voila ce que j’ai tenté de faire

Component

<template>
   <button type="button" class="btn btn-primary" @click="addQuantity()">Ajouter</button>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapActions, mapGetters } from 'vuex'

@Options({
  computed: {
    ...mapGetters({
      currentFood: 'OrganizeMeal/currentFood'
    })
  },
  methods: {
    ...mapActions({
      setFoodQuantity: 'OrganizeMeal/setFoodQuantity'
    }),

    addQuantity () {
      this.setFoodQuantity({
        food: this.currentFood,
        quantity: this.quantity
      })
    }
  }
})
export default class AddFoodQuantityModal extends Vue {
  quantity = 0
}
</script>

Store
State

export default {
  selectedFoods: [],
  currentFood: {},
}

Getters

export default {
  selectedFoods: (state: OrganizeMealState) => state.selectedFoods,
  currentFood: (state: OrganizeMealState) => state.currentFood,
}

Mutations

export default {
  SET_FOOD_QUANTITY (state: OrganizeMealState, param: SelectedFood) {
    for (let index = 0; index < Object.values(state.selectedFoods).length; index++) {
      const food = state.selectedFoods[index]
      if (food.food.name === param.food.name) {
        state.selectedFoods[index].quantity = param.quantity
        return
      }
    }

    state.selectedFoods.push({
      food: param.food,
      quantity: param.quantity
    })
  },

  SET_CURRENT_FOOD (state: OrganizeMealState, food: Food) {
    state.currentFood = food
  },
}

Actions

export default {
  setFoodQuantity ({ commit }: { commit: Commit }, param: SelectedFood) {
    commit('SET_FOOD_QUANTITY', param)
  },

  setCurrentFood ({ commit }: { commit: Commit }, food: Food) {
    commit('SET_CURRENT_FOOD', food)
  },
}

Test

describe('AddFoodQuantityModal.vue', () => {
  const $store = {
    modules: {
      OrganizeMeal: {
        namespaced: true,
        state: OrganizeMeal.state,
        getters: {
          selectedFoods: () => jest.fn(),
          currentFood: () => jest.fn(),
          nutrients: () => jest.fn(),
          activeFilters: () => jest.fn(),
          hasNoActiveFilters: () => jest.fn()
        },
        actions: {
          setFoodQuantity: () => jest.fn(),
          setCurrentFood: () => jest.fn(),
          cleanCurrentFood: () => jest.fn(),
          removeCurrentFood: () => jest.fn(),
          setFilter: () => jest.fn()
        }
      }
    },
    commit: jest.fn()

  }

  const wrapper = shallowMount(AddFoodQuantityModal, {
    global: {
      mocks: {
        $store
      }

    }
  })

  it('addQuantity button clicked success', async () => {
    const quantity = 100
    wrapper.vm.$store.modules.OrganizeMeal.state = {
      currentFood: {
        food: Fishes[0]
      },
      selectedFoods: [
        {
          food: Fishes[0],
          quantity: quantity
        }
      ]
    }

    wrapper.vm.quantity = quantity

    await wrapper.find('.btn-primary').trigger('click')

    const selectedFoods = wrapper.vm.$store.modules.OrganizeMeal.state.selectedFoods
    for (let index = 0; index < selectedFoods.length; index++) {
      if (selectedFoods[index].food.name === 'merlu') {
        return
      }
    }

    throw new Error(`
      No selected food have name merlu :\n
      Selected foods : ${JSON.stringify(selectedFoods)}
    `)
  })
})

Fish data

export default
[
  {
    name: 'merlu',
    weightValue: 800,
    weightUnity: 'g',
    nutritionalValues: {
      portionValue: 100,
      portionUnity: 'g',
      energy: 80.8,
      energyUnity: 'kcal',
      protein: 16.6,
      lipid: 1.6,
      carbohydrate: 0.5
    }
  }
]

Lorsque j’execute mes tests j’ai cette erreur
unit-test

salut

ces syntaxes me semblent bizarre

essaie
mapGetters('OrganizeMeal', ['currentFood'])
mapActions('OrganizeMeal', ['setFoodQuantity'])

sinon, les getters que tu as défini ne sont pas très utiles
autant utilisé directement le state avec mapState