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

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

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

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

Q&A

解決済

1回答

1122閲覧

【Vue/Vuex/Jest】VueコンポーネントのストアのテストでmapStateの中身が参照できない

fruitmachine

総合スコア47

Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

0グッド

0クリップ

投稿2019/11/01 08:21

vue-cliで作成したプロジェクトにて、jestを使ってテストしています。

Vueコンポーネントからstoreを参照していて、通常の実行では動作しています。
テストでもactionやmutationは機能しているようなのですが、mapStateが機能せずstateを参照できません。

どうしたら解決できるでしょうか...。

ソース

src/components/header/index.vue (抜粋)

<template lang="pug"> .wrapper(:class='deviceType') header.header .header__inner h1.header__title a(href='/') template(v-if='haslogo') img(v-if='logo.src' v-bind='logo') span(v-else) {{ logo.alt }} span(v-else) {{ documentTitle }} </template> <script> import { mapState } from "vuex"; import store from "./store"; export default { store, computed: { ...mapState(["logo"]), }, props: ["haslogo"], mounted() { this.$store.dispatch("init") }, }; </script>

src/components/header/store/index.js (抜粋)

javascript

1import Vue from "vue"; 2import Vuex from "vuex"; 3import actions from "./actions"; 4import mutations from "./mutations"; 5Vue.use(Vuex); 6 7export default new Vuex.Store({ 8 state: { 9 logo: {}, 10 }, 11 actions:{ 12 async init({commit}){ 13 await axios({ url: ENDPOINTS.themes }) 14 .then(result => { 15 commit('setLogo', { logo: result.data }) 16 return 17 }) 18 return 19 } 20 }, 21 mutations: { 22 setLogo(state, { logo }) { 23 state.logo = logo; 24 } 25 } 26});

tests/unit/components/header/index.spec.js (抜粋)

javascript

1import { shallowMount } from "@vue/test-utils"; 2import RootComponent from "@/components/header/index.vue"; 3import store from "@/components/header/store"; 4import axios from "axios"; 5jest.mock("axios"); 6 7const LOGO = { 8 alt: "Sample", 9 src: "sampleLogo.png", 10 width: 245, 11 height: 60 12}; 13 14describe("header.vue", () => { 15 it.only("画像があれば画像が表示される", done => { 16 axios.mockResolvedValue({ data: { logo_image: LOGO } }); 17 const wrapper = shallowMount(RootComponent); 18 setTimeout(() => { // mounted()の完了をまつ 19 console.log( 20 "wrapper.vm.$options.computed.logo", 21 wrapper.vm.$options.computed.logo 22 ); 23 console.log( 24 "wrapper.vm.$options.computed.logo.src", 25 wrapper.vm.$options.computed.logo.src 26 ); 27 28 expect( 29 wrapper 30 .find(".header__title") 31 .find("img") 32 .attributes().src 33 ).toBe("sampleLogo.png"); 34 done(); 35 },1) 36 }); 37});

エラー文

FAIL tests/unit/components/header/index.spec.js ● Console console.log tests/unit/components/header/index.spec.js:89 wrapper.vm.$options.computed.logo [Function: mappedState] { vuex: true } console.log tests/unit/components/header/index.spec.js:93 wrapper.vm.$options.computed.logo.src undefined ● header.vue › 画像があれば画像が表示される [vue-test-utils]: find did not return img, cannot call attributes() on empty Wrapper 100 | .find(".header__title") 101 | .find("img") > 102 | .attributes().src | ^ 103 | ).toBe("sampleLogo.png"); 104 | done(); at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:1417:9) at ErrorWrapper.attributes (node_modules/@vue/test-utils/dist/vue-test-utils.js:2092:3) at Object.attributes (tests/unit/components/header/index.spec.js:102:10)

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは。

https://vue-test-utils.vuejs.org/ja/guides/using-with-vuex.html

こちらのページをご覧になって頂きたいのですが、 shallowMount の第2引数に { store } を渡してあげる必要があります。

投稿2019/11/05 00:29

kaorun343

総合スコア47

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

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

fruitmachine

2019/11/27 02:39 編集

storeの注入の問題だと思っていたのですが、別で問題があったようです。失礼しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問