in

Unit testing Vuex actions with Jest mocks


Vue Test Actions

Unit testing Vuex actions with Jest mocks.

npm i --save vue-test-actions

or

yarn add vue-test-actions
import testAction from 'vue-test-actions'

testAction(action, expectedCommits, expectedDispatchs, payload, store)
Params Type Default Description
action Function Action function
expected commits Array [] Array of commit expectation
expected dispatchs Array [] Array of dispatchs expectation
payload Any undefined Parameter send to action function
store Object { state: {}, getter: {} } Object for mock store data such as state or getter
// user/actions.js

import userSerive from '../myUserService'

export async function getUser ({ commit, dispatch }, userId) {
  commit('setLoading', true)
  try {
    const { data } = await userSerive.fetchUser(userId)
    commit('setUser', data)
    dispatch('getUserPermission', data.id)
  } catch (e) {
    commit('setNotificationError', true)
  }
  commit('setLoading', false)
}
// user.spec.js

import testAction from 'vue-test-actions'
import * as actions from '~/store/user/actions'
import userSerive from '~/services/myUserService'

describe('getUser', () => {
  test('If success', () => {
    const payload = 1
    userSerive.fetchUser = jest.fn().mockReturnValue({ data: { id: 1 } })
    const expectedCommits = [
      { type: 'setLoading', payload: true },
      { type: 'setUser', payload: { id: 1 } },
      { type: 'setLoading', payload: false }
    ]
    const expectedDispatchs = [
      { type: 'getUserPermission', payload: 1 }
    ]
    testAction(actions.getUser, expectedCommits, expectedDispatchs, payload)
  })
})

  1. Fork this repository.
  2. Create new branch with feature name.
  3. Create your feature.
  4. Commit and set commit message with feature name.
  5. Push your code to your fork repository.
  6. Create pull request. 🙂
If you like this project, You can support me with starring ⭐ this repository.

[MIT]

GitHub

https://github.com/biigpongsatorn/vue-test-actions




Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Choosing Between AWS Lambda and Docker

MarQ M3 Smart to Launch on September 25 In India By Flipkart