Things I learned over the weekend: Vue.js Unit Testing — Part 1

It was New Year’s day when I wrote the first draft. It was a bit hard, getting into the groove after a mini-vacation of sorts. Everyone hates that feeling, I know I do. But my job is a vacation from poverty and so I decided to write something that I was learning. I distinctly remember having a conversation with my colleagues about starting with Test Driven Development. So, I decided to learn more about Vue.js Unit Testing and write some unit tests (I know, it’s not TDD if you’re writing Unit Tests after the development, but it’s still a start). After all, a task begun is a task half done.

Our project was set up using vue-cli and we used the pwa template, for the added advantage of a service worker. I will not be going through the project setup process, but if you like, you can learn it from the self-explanatory documentation of vue-cli. I used vue-cli because it gives you the advantage of bootstrapping the project with almost everything that you might need in your project. It allows you to code more with less setup. It comes with the basic test cases for the Hello.vue component pre-written for reference.

I have a confession to make. I have about four and a half years of experience in the industry and writing Javascript, but never have I ever written unit tests or integration tests or any kind of tests. I was clueless when I began and we have been so used to learning everything through video tutorials that I didn’t know where to start. Hopefully, this article will give a better understanding to those who want to start with unit testing with Vue.js.

I started off with the simplest component so that I don’t descend into despair. That helped me build my understanding. I’m going to do the same here so that I don’t scare anyone off.

The above component is very simple. It has only two states — loading and loaded. When content is loading, `loading` is true and as soon as content is loaded, the content inside the slot is rendered. These are essentially the two test cases that we’re covering. We do that by using the main App.vue file.

Now, here are the cases that we need to write unit tests for:

Let’s go line by line to understand what’s happening here.

Not too bad, eh? Reading through it once should suffice as I’ve tried to explain things in as simple terms as I can. If any doubt, leave a comment and I’d try to explain the best I can.

So that’s it. Run your test with npm run unit and you’ll see an output like:

Output for Loader component

I’ve created a simple repository with this example. Follow these steps and you’ll be able to run it on your machine.

git clone git@github.com:divyamrastogi/vuejs-unit-testing.git
cd vuejs-unit-testing
npm install
npm run unit

And you’re done with running your first ever Unit Test in Vue. It might seem daunting, but I feel that despite there being enough stress on Unit Testing, we don’t follow it. So, here’s a New Year resolution for everyone: Write Unit Tests.

I’ll also be starting with e2e testing, so stay tuned into this space for more!