vuexのテスト
vuexをjestでテストする際のメモ
vuexを使ったコンポーネントのサンプル
<template> <div> user情報 <div> name: {{name}} </div> <div> email: {{email}} </div> <div> role: {{role}} </div> </div> </template> <script> export default { computed: { name() { return this.$store.state.loginInfo.name; }, email() { return this.$store.state.loginInfo.email; }, role() { return this.$store.state.loginInfo.role; } } }; </script>
このようなマイページコンポーネントがあったとします。
ログインした際のユーザ情報を表示するコンポーネントですね
テストコード
import {shallowMount, createLocalVue} from '@vue/test-utils'; import Vuex from 'vuex'; import MyPage from './my-page'; const localVue = createLocalVue (); localVue.use (Vuex); describe ('my-page', () => { let state let store let wrapper beforeEach (() => { state = { loginInfo: { name: '', email: '', role: '', }, }; store = new Vuex.Store ({ state }); wrapper = shallowMount (MyPage, { store, localVue }); }); it ('has a text : name', () => { const name = wrapper.findAll ('div > div').at (0); expect (name.text ()).toBe ('name:'); }); });
localVue
というテスト用のvueインスタンスをつくって、
そこに今回モックされたvuex(一時使用用のvuex)を渡して処理させる感じ。