How to test a vuex plugin without vuex dependencies

Bob Thomas
Jul 27, 2018 · 3 min read

“TLDR;”
Create a mock vuex-store and subscribe and fire events manually

Introduction

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.

Simple plugin

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.

Mock store

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.

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.


Bob Thomas

Written by

Hi there I am a software engineer and I work as a web developer..But in my free time and study I dabble in embedded engineering and build useless projects

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade