Oscar the owl and Vershd logo
Menu

How to Vuex Store Mock - Quickly

The lightweight way to test with Jest...

Creating a Vuex store mock can be tricky, and sometimes you want a lightweight and easy solution without using Vue Test Utils. So here are some working examples you can copy and paste, written in TypeScript, for simply mocking the Vuex store.

They are written in Jest, but there are parallels with Jasmine since that's what Jest is based on. You're probably using this from Vue.js, but it doesn't matter if not. This mock class isn't tied to any version or instance of Vue at all, and you can mock Vuex modules as well.

The Vuex Store Mock Class

This is the Jest mock class. It mocks the production Vuex store 'MyStore', allowing you to 'commit' new values and 'get' those values back.
import MyStore from '../src/renderer/store/MyStore'

/* The state methods within this get overridden by jest.spyOn(), as below. */
jest.mock('../src/renderer/store/MyStore', () => jest.fn())

export class MyStoreMock {
/**
* Overrides specific items in the MyStore. This gets called by each test
* to ensure they are each using different spies & values.
*
* @static
* @param {Map} mockStoreItems
* @param {*} uniqueID
* @memberof MyStoreMock
*/
public static init(mockStoreItems: Map, uniqueID: any) {
/* Useful for initialising the store's items with unique values. */
if (uniqueID) {
for (const key of mockStoreItems) {
mockStoreItems.set(key[0], uniqueID + key[0])
}
}

jest.spyOn(MyStore, 'commit').mockImplementation((commitItem: any,
newValue: any) => {
mockStoreItems.set(commitItem, newValue)
})

jest.spyOn(MyStore, 'getters', 'get').mockImplementation(() => {
/* We must generate this now to include 'commit' changes etc. */
let getters = {}

for (const key of mockStoreItems) {
getters[key[0]] = key[1]
}

return getters
})
}
}

Jest Test File

This holds the tests you want to carry out. It sets up the mock items, carries out the action to 'getData()' and then asserts that the mock worked as expected.
import { PinkFloyd } from '../../src/renderer/model/PinkFloyd'
import { MyStoreMock } from '../../MyStoreMock'

describe('Mock Example', () => {
test('MyStoreMock', () => {
let mockStoreItems = new Map()
/* This value will get set using the global unique ID on the next line.
* The production store has a value of 'The Endless River' */
mockStoreItems.set('worstAlbum', '')

MyStoreMock.init(mockStoreItems, "There isn't one")

/* The production store has a value of 'Wish You Were Here' */
mockStoreItems.set('bestAlbum', 'Dark Side of the Moon')

/* Modules can be mocked as well.
* The production store has a value of 'David, Rick, Roger, Nick' */
mockStoreItems.set('Members/names', ['John', 'Paul', 'Whoops'])

const pinkFloyd = new PinkFloyd()

/* This sets all the data that we're testing below */
pinkFloyd.getData()

expect(pinkFloyd.worstAlbum).toBe('There isn't one')
expect(pinkFloyd.bestAlbum).toBe('Dark Side of the Moon')
expect(pinkFloyd.members).toContain('Whoops')
})
})

Upgrade to GitBreeze - the effortless Git client 100% free for any use

Conclusion

So what we've done here is to leave the production code exactly as it is. We've created a re-usable Jest mock class which replaces the standard Vuex store, and created Jest tests to verify that it works. There's no need for Vue Tests Utils or any other testing framework except Jest.

Free

GitBreeze is an effortless Git GUI that's free for use at work, at home, anywhere. It boosts software development. It works on Windows, macOS, and Linux.

Designed for developers who want Git to be simple, our unique UI/UX boosts your software development - learn more and reap the benefits.

Coding help

Designed to improve your software development life, this is a full list of our coding help pages.

There's more to assist you, with Git tips and best software development practices, on our resources page.

We also have this free download to help with Git - our Git cheat sheet

Customers say...

I love any tool that makes my life easier... This is perfect, just the right amount of control. No more, no less. Easy to get started, push and rollback changes... It's a no brainer!
Hayden T.
Oscar the owl and Vershd logo
 © 2024 GitBreeze Ltd.
St. George's flag of England, the Union Jack flag of the United Kingdom, the European Union flag, and the United Nations flag.
chevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram