Next up on my side project, Orange Wheel, frontend testing!
It’s been my goal since reading Test-Driven Development with Python by Harry J.W. Percival to get into the habit of setting up basic testing before I program contents. This time is no exception.
As mentioned before, I wanted to use Jest.
There are couple of things to focus on when looking for resources on frontend testing.
- Read what the package or program you installed do: Just because a tutorial or documentation tells you to download a package, doesn’t mean you should blindly do it. If you come back to the project, you may have no idea what you did. That is not good if you are trying to explain your project, debug it, or replicate the process for another project. It’s also a good habit as a developer to have an idea of what your third-party package do for the sake of security.
In fact, during this week when I was suppose to work on my unit testing, I was asked to help out with the curriculum material on Enzyme testing for Techtonica. The course intended to use a Medium posting for an in-class exercise. I remember reading the post while looking at the documentation on Jest and Enzyme. There were references to previously required npm package installation and optional packages. As a result, in my slides, I made sure to address it. Following the Medium exercise steps wouldn’t harm the project, but new programming students should know that Enzyme is not that complicated and don’t require those packages or configurations. It would also lessen their confusion when they look at other tutorials and notice that those packages and configurations are not used.
The Installation & Config
To get Jest set up in Vue, there is this simple command:
npm install –save-dev jest @vue/test-utils vue-jest babel-jest
There are also some package.json configuration. In particular, to enable the use of @ as a reference for src folder, I have to add new property, “moduleNameMapper”, to package.json’s “jest” property.
- @vue/test-utils is needed for obvious reason – it’s the utility to enable testing in Vue! Needing to install jest goes without saying, of course.
- This should be followed by adding “test”: “jest” to package.json file’s “scripts” property.
- vue-jest is the preprocessor to enable import of single-file component (SFC) built by the Vue.js team.
- babel-jest adds support for ES modules syntax. Without it, the import statement didn’t work in my case.
The detail of the installation and configuration are very nicely written in the docs of Vue Test Utils by the Vue.js team. Well-written office documentation rules!!! ✊