Nuxt.js【vuexテスト編】

概要

vuexをTypeScript + nuxt-typed-vuexで開発している際のテストコードのサンプルです。

• Vue Test Utils
• nuxt-typed-vuex
• Jest

設定についてはこの記事を参考にしてください
=>【プロジェクト設定編】

Store

store/index.ts

import { getAccessorType } from 'typed-vuex'
import * as user from '@/store/user'

export const state = () => ({})

export const getters = {}

export const mutations = {}

export const actions = {}

export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {
    user
  },
})

store/user.ts

import { getterTree, mutationTree, actionTree } from 'typed-vuex'

export const state = () => ({
  name: '',
  age: 0,
})

export type RootState = ReturnType<typeof state>

export const getters = getterTree(state, {
  name: state => state.name,
  age: state => state.age,
})

export const mutations = mutationTree(state, {
  setAge(state, age: number): void {
    state.age = age
  },
  setName(state, name: string): void {
    state.name = name
  }
})

export const actions = actionTree({ state, getters, mutations }, {
  async greet({ getters }): Promise<string> {
    const { name, age } = getters
    return `I’m ${name} ${age} years old.`
  }
})

Test

store/user.spec.ts

import { useAccessor } from 'typed-vuex'
import Vuex, { Store } from 'vuex'
import Vue from 'vue'
import { state, getters, mutations, actions, accessorType } from '@/store'
import * as user from '@/store/user'

describe.only('store/user', () => {
  const pattern = {
    state,
    getters,
    mutations,
    actions,
    modules: {
      user
    },
  }
  let accessor: typeof accessorType

  beforeEach(() => {
    Vue.use(Vuex)
    const store = new Store(pattern)
    accessor = useAccessor(store, pattern)
  })

  test('mutationsのテスト', () => {
    expect(
      accessor.user.name
    ).toEqual('')
    accessor.user.setName('test')
    expect(accessor.user.name).toEqual('test')
  })

  test('actionsのテスト', async () => {
    const name = "test";
    const age = 20;
    const greet = `I’m ${name} ${age} years old.`;

    accessor.user.setName(name)
    accessor.user.setAge(age);

    const result = await accessor.user.greet();

    expect(result).toEqual(greet)
  })
})

感想

actionsがPromiseを返すので、そこがハマりポイントでした。^^;