Jest を使ってVuexのactionsのユニットテストを行う

actionsのサンプルコード

今回は以下コードのユニットテストを作成していきたいと思います。

store/actions.js

import axios from "axios"

export default {
  async getStatus({ commit }) {
    const { status } = await axios.get("/api/status")
    commit("updateStatus", status)
  }
}

axiosのgetメソッドを実行し、レスポンスの中にstatusというプロパティが格納されており、その値をcommitするactionsです。 statusプロパティには文字列が格納されます。

テストコードを作成する

このactionsのテストとして、

axios.get()メソッドを実行しているか
引数に想定された値を渡し、commitを実行できているか

という観点で、テストコードを作成します。

store/actions.spec.js

import axios from 'axios'
import actions from './actions'

jest.mock('axios')

axios.get.mockImplementation((url) => {
  switch (url) {
    case '/api/status':
      return Promise.resolve({ status: 'success' })
  }
})

describe('sample actions unit test', () => {
  it('getStatus', async () => {
    const commit = jest.fn()
    await actions.getStatus({ commit })
    expect(axios.get.mock.calls.length).toBe(1)
    expect(commit).toHaveBeenCalledWith('updateStatus', 'success')
  })
})

jest.mock()

axiosのような外部モジュールはjest.mock()を使うことでモック化することができます。モック化したモジュールはJestのモック関数を扱うことで、振る舞いを自由に設定することができます。

mockImplementation

モック化された関数の戻り値の変更をする際は、mockImplementation()を利用します。今回のケースではモック化したaxiosのget()メソッドに対し、mockImplementation()を実行し、テストケースに合せた戻り値を設定しています。

toHaveBeenCalledWith

commitの実行確認に利用したtoHaveBeenCalledWithは、モック関数が特定の引数を与えられて呼び出されたことを確認することができます。

TOC

actionsのサンプルコード

テストコードを作成する

jest.mock()

mockImplementation

toHaveBeenCalledWith