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

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

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

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

Vuex

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

ユニットテスト

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

解決済

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

fruitmachine
fruitmachine

総合スコア0

Vue.js

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

Vuex

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

ユニットテスト

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

1回答

0評価

0クリップ

22閲覧

投稿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

import Vue from "vue"; import Vuex from "vuex"; import actions from "./actions"; import mutations from "./mutations"; Vue.use(Vuex); export default new Vuex.Store({ state: { logo: {}, }, actions:{ async init({commit}){ await axios({ url: ENDPOINTS.themes }) .then(result => { commit('setLogo', { logo: result.data }) return }) return } }, mutations: { setLogo(state, { logo }) { state.logo = logo; } } });

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

javascript

import { shallowMount } from "@vue/test-utils"; import RootComponent from "@/components/header/index.vue"; import store from "@/components/header/store"; import axios from "axios"; jest.mock("axios"); const LOGO = { alt: "Sample", src: "sampleLogo.png", width: 245, height: 60 }; describe("header.vue", () => { it.only("画像があれば画像が表示される", done => { axios.mockResolvedValue({ data: { logo_image: LOGO } }); const wrapper = shallowMount(RootComponent); setTimeout(() => { // mounted()の完了をまつ console.log( "wrapper.vm.$options.computed.logo", wrapper.vm.$options.computed.logo ); console.log( "wrapper.vm.$options.computed.logo.src", wrapper.vm.$options.computed.logo.src ); expect( wrapper .find(".header__title") .find("img") .attributes().src ).toBe("sampleLogo.png"); done(); },1) }); });

エラー文

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)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vuex

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

ユニットテスト

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