How to Test Store in Vue: Simple Guide with Examples

To test a Vue store, use a testing framework like Jest and import the store module to check its state, mutations, and actions. Mock dependencies if needed and use store.commit or store.dispatch to trigger changes and verify results.

Syntax

Testing a Vue store involves importing the store instance, then using commit to test mutations and dispatch to test actions. You check the store's state to verify changes.

• store.commit('mutationName', payload): Calls a mutation to change state.
• store.dispatch('actionName', payload): Calls an action which can be async.
• store.state.property: Accesses current state values.

javascript

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return { count: 0 }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      return new Promise(resolve => {
        setTimeout(() => {
          commit('increment')
          resolve()
        }, 100)
      })
    }
  }
})

// Testing mutations
store.commit('increment')
console.log(store.state.count) // 1

// Testing actions
await store.dispatch('incrementAsync')
console.log(store.state.count) // 2

Output

1
2

Example

This example shows how to test a Vuex store's mutation and action using Jest. It verifies that the state updates correctly after committing a mutation and dispatching an action.

javascript

import { createStore } from 'vuex'

describe('Vuex Store Tests', () => {
  let store

  beforeEach(() => {
    store = createStore({
      state() {
        return { count: 0 }
      },
      mutations: {
        increment(state) {
          state.count++
        }
      },
      actions: {
        incrementAsync({ commit }) {
          return new Promise(resolve => {
            setTimeout(() => {
              commit('increment')
              resolve()
            }, 100)
          })
        }
      }
    })
  })

  test('mutation increments count', () => {
    store.commit('increment')
    expect(store.state.count).toBe(1)
  })

  test('action increments count asynchronously', async () => {
    await store.dispatch('incrementAsync')
    expect(store.state.count).toBe(1)
  })
})

Output

PASS  Vuex Store Tests
  ✓ mutation increments count (5 ms)
  ✓ action increments count asynchronously (105 ms)

Common Pitfalls

Common mistakes when testing Vue stores include:

• Not resetting the store state before each test, causing tests to affect each other.
• Testing actions without waiting for async operations to finish.
• Directly mutating state outside mutations, which breaks Vuex rules.
• Not mocking external API calls inside actions, leading to flaky tests.

javascript

/* Wrong: Not resetting store state */
store.commit('increment')
expect(store.state.count).toBe(1)
store.commit('increment')
expect(store.state.count).toBe(2) // Fails, count is 2 now

/* Right: Reset store before each test */
beforeEach(() => {
  store = createStore({ /* ... */ })
})

Quick Reference

Tips for testing Vue stores:

• Always create a fresh store instance for each test.
• Use commit to test mutations synchronously.
• Use dispatch with async/await to test actions.
• Mock external dependencies inside actions to isolate tests.
• Check store.state to verify expected changes.

Key Takeaways

Create a new store instance before each test to avoid shared state issues.

Use store.commit to test mutations and verify state changes immediately.

Use async/await with store.dispatch to test asynchronous actions reliably.

Mock external calls inside actions to keep tests fast and predictable.

Always check the store.state after mutations or actions to confirm expected results.