Create a mock vuex-store and subscribe and fire events manually
The reason I am writing this article is because I couldn’t find any other people that testing a vuex store plugin. Or well I did find some but they all involved a vuex dependency. Normally I don’t oppose in using vuex dependency to solve this problem. But I was writing tests for a open source project “https://github.com/MatteoGabriele/vue-analytics” and it didn’t have that dependency and I didn’t feel like adding it as a dependency as well.
So for this short example we will write a really small implementation of a vuex plugin. I want this plugin to throw an error if the payload has a trigger property set to true. And if not I want it to do nothing.
This is really quite simple and nothing special. But of course this is just a simple plugin and only limited by your imagination.
Now the actual fun part which is also super easy is building the mockStore. With mockStore I mean a object that has a mostly similar interface as a real vuex store. In the real vuex store it keeps track of subscribers which. To become a subscribe you use the store.subscribe as seen in the previous example. This adds the plugin to a subscriber list[subscriber list in vuex]. There is also a subscribe list for actions but we won’t cover that for this example. So what the mockStore should be do is have a subscribe function that adds an function to the subscriber list. Normally when a state change occurs the vuex stores fires all the functions in that subscriber list. But we want to have more control over when to fire so how about we create our own fire method. like this
And that is really all there is to it. Now you have a mockStore you can use in your tests.
In this implementation we use the jest testing runner. This way of testing is for what I know implementation agnostic but the repository I wrote the test for used Jest so that’s the reason I am using it in this example. So to test it we load in the plugin and mock store. Before each test we hook the plugin into the store so the plugin function gets added to the subscriber list. Now we create 2 scenarios one with a payload that has trigger on true and one with a payload that has the trigger on false. We then call
store.fire(mutation) to fire a event to all the subscribers with as parameter the new payload.
And we are done
And that’s how simple it is to test a vuex plugin. I hope this will help someone in the future. It was sure fun to write tests for the before mentioned repo and learned a lot about how the vuex store works. To end with a nice example I have setup a codesandbox in which you can see all the code.