やっていること
fruits
の名前を表示するだけの簡単なアプリケーションをNuxtで作成し、そのテストを書こうとしています。
実装自体は完了しており問題なく動作していますが、テストがどうしても通らず詰まってしまったため質問させていただきたいです。
問題点
テストを流すと以下のようなエラーが返ってきて落ちてしまします。
storeに処理を分けて書いている場合のテストの書き方が分からないため、もしご存知の方がいらっしゃいましたら教えていただきたいです。
[vuex] unknown getter: pages/fruits/FRUITS [vuex] unknown action type: pages/fruits/GET_FRUITS
アプリ側のソースコード
vue
1<!-- src/pages/fruits/index.vue --> 2 3<template> 4 <div> 5 <div 6 v-for="f in getFruits" 7 :key="f.id" 8 class="Item" 9 > 10 {{ f.name }} 11 </div> 12 </div> 13</template> 14 15<script> 16import { mapActions, mapGetters } from 'vuex' 17import { ACTION_TYPES, GETTER_TYPES } from '~/store/pages/fruits/index' 18 19export default { 20 computed: { 21 ...mapGetters({ 22 fruits: GETTER_TYPES.FRUITS, 23 }) 24 }, 25 26 methods: { 27 ...mapActions({ 28 getFruits: ACTION_TYPES.GET_FRUITS, 29 }) 30 } 31} 32</script>
テスト側のソースコード
とりあえず、fruitsが一つでも表示されているか(= Item
classが一つでも存在するか)をテストしようとしています
ts
1// tests/pages/fruits/index.spec.ts 2 3import { shallowMount, createLocalVue } from '@vue/test-utils' 4import Vuex from 'vuex' 5import * as fruits from '~/store/pages/fruits/index' 6 7const localVue = createLocalVue() 8localVue.use(Vuex) 9 10describe('Index', () => { 11 let s 12 s = { 13 modules: { 14 fruits: { 15 getters: { 16 FRUITS: () => [{ id: 1, name: 'apple' }] 17 }, 18 actions: { 19 GET_FRUITS: jest.fn() 20 } 21 } 22 } 23 } 24 }) 25 const store = new Vuex.Store(s) 26 27 const wrapper = shallowMount<any>(Index, { 28 localVue, 29 store 30 }) 31 32 it('shows', () => { 33 expect(wrapper.find('.Item').exists()).toBe(true) 34 })
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。