前提・実現したいこと
Vue Test UtilsガイドをもとにAPIのテストを書いています。
コンポーネントのボタンが押された時にAPIが呼び出されているかを確かめるテストです。
テストを実行するとエラーが出てしまいす。躓いたので質問させていただきます。
コンポーネント内の Vuex をテストする
発生している問題・エラーメッセージ
FAIL test/store/smaple.spec.js (14.133 s) Actions.vue ✕ アクションテスト (119 ms) ● Actions.vue › アクションテスト TypeError: Cannot read property 'selectedBook' of undefined 13 | computed: { 14 | selectedBook () { > 15 | return this.$store.state.book.selectedBook | ^ 16 | }, 17 | disabled () { 18 | return this.selectedBook === null
該当のソースコード
registrationBtn.vue
js
1<template> 2 <v-btn 3 color="success" 4 class="ma-3" 5 :disabled="disabled" 6 @click="post" //ボタンを押したときにstore/indexが呼び出されているか 7 > 8 登録する 9 </v-btn> 10</template> 11<script> 12export default { 13 computed: { 14// 今回のエラー TypeError: Cannot read property 'selectedBook' of undefined 15 16 selectedBook () { 17 return this.$store.state.book.selectedBook 18 }, 19 disabled () { 20 return this.selectedBook === null 21 } 22 }, 23 methods: { 24 // 書籍を送る 25 post () { 26 this.$store.dispatch('post') 27 } 28 } 29} 30</script> 31
store/index
js
1 2export const actions = { 3 // 本と行動リストの登録///////////////////////////////// 4 post ({ state, commit }) { 5 const list = state.todos.list 6 const selectedBook = state.book.selectedBook 7 8 // サーバーに送る配列を作成 9 const postItemsAttributes = 10 list.map((item) => { 11 return { 12 content: item.content, 13 status: item.status 14 } 15 }) 16 17 // plugin/bookInfo $title,$author,$image 18 this.$axios.$post(url.POST_API + 'posts', { 19 post: { 20 title: this.$title(selectedBook), 21 author: this.$author(selectedBook), 22 image: this.$image(selectedBook), 23 post_items_attributes: postItemsAttributes 24 } 25 }) 26 .then((response) => { 27 commit('alertSwitchRegister', true) 28 setTimeout(() => { 29 commit('alertSwitchRegister', false) 30 }, 3000) 31 commit('book/responseBook', response) 32 commit('book/clearBook') 33 commit('todos/clear') 34 }) 35 .catch(() => { 36 commit('alertSwitchError', true) 37 setTimeout(() => { 38 commit('alertSwitchError', false) 39 }, 3000) 40 }) 41 } 42
smaple.spec (テスト)
js
1import { shallowMount, createLocalVue } from '@vue/test-utils' 2import Vuex from 'vuex' 3import registrationBtn from '@/components/BookPostKit/button/registrationBtn.vue' 4 5const localVue = createLocalVue() 6 7localVue.use(Vuex) 8 9describe('Actions.vue', () => { 10 let actions 11 let store 12 let mutations 13 14 beforeEach(() => { 15 actions = { 16 post: jest.fn() 17 } 18 19 mutations = { 20 selectedBook: () => {}, 21 disabled: () => {} 22 } 23 24 store = new Vuex.Store({ 25 state: {}, 26 mutations, 27 actions 28 }) 29 }) 30 31 it('アクションテスト', () => { 32 const wrapper = shallowMount(registrationBtn, { store, localVue }) 33 wrapper.find('button').trigger('click') 34 expect(actions.post).toHaveBeenCalled() 35 }) 36}) 37
試したこと
・mutationsのモックが作成されていない事で起こるエラーかと思い、selectedBookとdisabledのモックを追加しました。
私の認識では、モックにはダミーの値を与えてテストをするという認識だったので、mutationsにダミーの値を追加しましたが、同じエラーが出てしまいました。
js
1// 追加 2mutations = { 3 selectedBook: () => {}, 4 disabled: () => {} 5 } 6 7 store = new Vuex.Store({ 8 state: {}, 9 mutations, //追加 10 actions 11 }) 12 })
あなたの回答
tips
プレビュー