vuexのテスト覚書(jest)

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）を渡して処理させる感じ。