Tests or me is like a guarantee for good sleep 🙂 Everyone likes good sleep. Front-enders also 🙂 But how that applies on everyday basis? How easy/hard is to cover Your Vue based app with tests?
What I know about the testing?
Being a full-stack developer for the most part of my developer carrier I definitely can say something about the test. It is a very nice to have and in some cases it is a must have feature. If company is making some huge project and is not investing in some testing – the trouble is only a matter of time. Usually everything is fine until something should be changed for some reason. That something can be a very small detail but very tightly involved in some very complex logic. I will not go deep into it – there are masses of examples and stories about failures which could be very easily prevented if code would be tested.
In my carrier I had opportunity to work in very nice companies who did invested in testing. And I can tell one thing – there is difference even in how people behave when they are sure that their code is well tested. You can smell self confidence in every word and smile 🙂 It’s like You would drive a car which stood out all the worst roads in the World or came back in one single piece from Dakar rally. It’s something You can be proud of and tell your friends about it.
And the opposite of that is no tests at all. People are walking with scary eyes and often they are offered to be prepared for any emergency situations and work long hours on some important stuff. Yep, I have been in such situation also. Even if they pay You a double rate for Your after work hours it is usually not a perfect deal – the stress level is too high and the money You will get will never be enough to buy You lost health. So I would suggest You to think in a long term if You are having such situation. After working in such company any other offer with option to pay double for overtime raises me a red flag and forces me to ask about testing in that project.
So how hard is to test Vue components?
I am not (yet) the super guru of Vue.js and in order to start with testing I referred official documentation https://vuejs.org/v2/cookbook/unit-testing-vue-components.html. Awesome documentation is one of the reasons I have started to learning Vue.js so I expected that with testing it will be all I need to know. Well basically this is true – at least You will find all the hints and most of links in this official documentation. But to utilise all the best tools out there You will definitely want to check some more stuff. Check out my list.
Where to start with Vue tests?
As I sad I was a new guy for the Vue testing so gone threw all of that by myself. For the new guy I would say follow this path and You will be in a good position:
- check out official documentation
- check out vue-test-utils documentation
- pick your testing setup – I would suggest to setup few stand alone projects using vue-cli or even better vue vue-cli provided web UI – that will help You to discover all the options and pick what fits for You best
- then next steps will depend on what kind of setup You chose – Jest or webpack + Karma
- try to make some tests
- …
I tried to use Jest and webpack & Karma but Jest looked much more straightforward so I did all my testings in Jest. However in documentation there was a note about that some things can not be tested with Jest. I didn’t found anything like that. Maybe the project was too simple.
That’s about it…
Well not exactly. One of the confusing parts of testing Vue components is to understand what to test. It seems obvious – we need to cover as much as we can and we will be good to go. Yea, but this unit testing and that means we should test as little things at a time as possible. For example when You have component which has a button and @click handler attached to it You could try to make a test which would try to click on that button and then check if DOM is updated as expected and so on. But basically that is little bit too much. All we need to do is run that handler and see what is happening – is internal state changed in some way or not. And usually that is enough for the unit test.
Another confusing part I found was to keep in mind the mount option You pick and find out the difference between mount and shalowMount. When I realised how powerful and helpful this is I was blown away and started to enjoy testing. I must admit – it took a wile to understand it. Google is Your friend as always 🙂
And another good stuff who helped me to understand how things go was snapshots. Snapshot is a file which holds all the output from the rendered component at the moment You take the snapshot. You can have as many of them as You need and make them at any time You like. One more thing to note about the snapshots is that those snapshots should be updated only after component is modified. To make use of snapshots You should not update them on some testing environment. Snapshot is like a checksum fo the file. You make changes to the component, then run tests and only if test are failing for snapshot reasons You should run the tests again (usually it goes like yarn test:unit -u or npm run test:unit -u) and then push all the new snapshots to the server. Also I have noticed that sometimes snapshots can fail when using –coverage flag so after making some changes and before pushing all to the repository I always run tests with just and -u and without –coverage. Unless You are doing –coverage on Your testing environment.
Is it all that simple?
Like in any technology there are easy and not so easy things to do. So in Vue testings actually there are some cases when You will have to dig deeper. If this is first time when You do any kind of testing then You just get used to it and find out how things like mock, spy, stub works. It all becomes necessary when You are testing a component witch makes some API calls or do some other stuff in asynchronous fashion or want to achieve more isolation. But again remember that Google is Your friend. I found this package called jest-mock-axios now and I am sure that this will do the job in most axios use cases. At the moment I wrote first tests with axios involved I didn’t found that package so I did axios mock by myself. So keep googling because community of Vue developers is growing very fast and a lot of new stuff is coming every day.
What about benefits from the company perspective?
These days people are usually moving fast. It is not easy to keep same employees in one place. I have seen all kind of situations and teammates in my carrier. Some of them where working for the some company for 8 years, others shifted every ~2 years or even every 1 year. Which one scenario is better for the company? I would say it depends. If the company is smart they understand how important is to have a highest quality employees. Then such companies do a lot of to level up their crew – conferences, learning budget, internal knowledge sharing programs and so on. Other companies does nothing about that and just expects that super talented people will join the team and do some awesome job. And sometimes works one thing and sometimes works another maybe. But if there is no tests and anyone from those super talents leave then someone in that company will have a huge pain finding another super talent who would like to take Your pain and take care of it. Usually such talents do give up and tries to search for better place to work in. So I think tests can help companies a lot in in attracting and retaining talents.
Good luck!
As always thanks for reading, share, like, comment and so on if You have found some value in this post. And don’t be afraid of Vue testing – it is easy and it will help You discover things that You didn’t expected. I found couple of bugs on my components which wasn’t so obvious just by trying to use those components so I would say there is definitely an value in testing. Sleep well 😉