前提・実現したいこと
Nuxt.jsを用いて作成したアプリケーションに関して、コンポーネントのテストを実行したいです。
初めて利用させていただきます。
現在、フロントエンドテストの練習としてNuxt.jsで簡単なアプリを作成し、
Jestを用いてテストコードを書いております。
2週間ほど様々な対策や調査をしてみたのですが、どうしてもコンポーネントのテストの際に起こるエラーが解決できずに苦戦しております。
どうかお力をお貸しいただけたら嬉しいです。
発生している問題・エラーメッセージ
TypeError: Cannot read property 'state' of undefined
該当のソースコード
index.vue
1index.vue 2 3<template> 4 <section class="container"> 5 <h1>{{title}}</h1> 6 <p>{{$store.state.message}}</p> //ここが該当箇所です。 7 <hr> 8 <div class="link" 9 v-on:click="doAction"> 10 <a> 11 clicked: {{ $store.state.counter }} 12 </a> 13 </div> 14 </section> 15</template> 16 17 18<script> 19export default { 20 data: function(){ 21 return { 22 title:'Hello', 23 message: 'this is message.', 24 }; 25 }, 26 methods: { 27 doAction: function(){ 28 this.$store.state.counter++; //ここが該当箇所です。 29 } 30 } 31}; 32</script> 33
試したこと
- clonedeepを行ってみる
- storeをモック化してみる
- propsDataを用いてstoreとstateの値をセットしてみる
- localVue?を使用してみる…等
色々試してみた現在のindex.spec.jsは以下の通りです。
index.spec.vue
1import { mount, createLocalVue } from "@vue/test-utils"; 2import Vuex from "vuex"; 3import index from "@/pages/index.vue"; 4import { cloneDeep } from "lodash"; 5import indexStore from "@/store/index.js"; 6import * as store from "@/store"; 7 8const localVue = createLocalVue(); 9localVue.use(Vuex); 10 11describe("index.vueのテスト", () => { 12 let store; 13 beforeEach(() => { 14 // const wrapper = mount(index); 15 // store = new Vuex.Store(cloneDeep(indexStore)); 16 store = new Vuex.Store({ 17 state: {} 18 }); 19 }); 20 test("タイトルが表示されている", () => { 21 // console.log(wrapper); 22 const wrapper = mount(index, { 23 store 24 }); 25 expect(store.state.count).toBe(0); 26 expect(wrapper.find(".title")).toBeTruthy(); 27 }); 28 test("カウント前の表示が0", () => { 29 const wrapper = mount(index); 30 expect(wrapper.find("a").value).toBeTruthy(); 31 }); 32});
補足情報(FW/ツールのバージョンなど)
"@vue/test-utils": "^1.0.0-beta.27", "babel-jest": "^24.1.0", "jest": "^24.1.0", "vue-jest": "^4.0.0-0"
宜しくお願いします。
あなたの回答
tips
プレビュー