Starting to test Vue with Jest part — I
Hi :)
In this story I will show you how to start tests with Vue and Jest and a previous understand about the library vue-test-utils!
Well, I was reading and seeing everyone writing about Vue tests and using many frameworks and tools. But when we are starting with test we don’t know what tools the community is using and what is the best test runner for us.
So in my first post I did a research to know what is test runners, what the community is using, and the pros and cons of each one for start this story :)
When I was looking for examples and tutorials of testing I came across two libraries: Avoriaz and vue-test-utils \o/
I thought about choosing one to start the tests so I went to read the Avoriaz doc and WOW
DEPRECATED!
Sooo… I went back to answer my question WHY Avoriaz is deprecated?
The Avoriaz owner is eddyerburgh and he is the same which contribute with vue-test-utils coincidence, right? Yeah, Avoriaz was so good for Vue js tests which Evan You (Vue JS Creator) and others colaborators brought the idea and Eddy, and transform the Avoriaz into an official Vue tool!
Ok Vue Test Utils and what more?
The documentation recommend Jest and Mocha, because the community already create plugins which runs with a little bit configuration the Vue Single-File Components (SFC).
Things they consider for recommend the two test runners is: feature set, performance, and support for single-file component (SFC) pre-compilation.
Nice! So what choose?
Using vue webpack scheffold with vue-cli in another projects, I was choosing the Mocha + Karma for unit tests because they come configured as default. But now I’m in a project using Laravel + Vue and the Laravel configuration doesn’t come with vue test runners by default (bad practice :/ ).
So my first research of test runners was really useful. I really did not want to configure all webpack and mocha configurations I was short and I don’t know so much about how to configure webpack and good practices.
So the Jest purpose fit perfectly
Zero configuration testing platform :)
Wich let me motivated to try!
All this stories serie will be back-end framework agnostic, so we will focus only in Vue and Tests!
Starting add Jest and Vue test utils to the project
Remember this tutorial will work fine in all projects with vue using single file components and webpack configurations, disregard the folders which your project doesn’t have, focus only on jest test folders, paths and configurations.
The Vue Test Utils doc has a nice example how to install Jest and use with vue-test-utils.
So I simply followed all the tutorial steps and configure only things for my needed
For our first steps we only need to follow this commands wich the tutorial says to install:
Heeey don’t forget about the simpliest configurations in package.json which the tutorial explains, your package file should look like:
Hell Yeah! Now we can run the npm test… Without tests? Why?
Lets create our first test with Jest :)
The vue test utils and Jest give us a tip! They said, create your test’s files into the __tests__ folders. And we can put this in many folders to explicit to us which all files in this have tests :)
Ok, baby steps… Why we don’t create a __tests__ folder into components? We can refact later ;) And create a Hello.spec.js file into the folder.
Ok, lets write some code…
Now we can run our first test using the npm command in your favorite terminal: npm test
VOILÁ!
All passed!
Recapping
- We understand which Jest and Vue Test Utils are simple and good tools to simple install and run our tests.
- We know the main commands to install the tools and run the tests
- And we make our first test and see it pass
Now we have our environment running tests!!!
In the next story
We will create a real project and I will explain about the methods of jest and test utils which we will use to make real and significant tests together!!!
See you soon :)
