質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

Q&A

0回答

1104閲覧

Nuxtでテストを実行すると TypeError: Cannot read property 'XXX' of undefinedと表示される

kaji120

総合スコア39

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

0グッド

0クリップ

投稿2022/02/08 09:03

編集2022/02/08 11:27

前提・実現したいこと

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 })

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問