Orange Wheel: Unit Testing with Jest

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.

The Research

  • Use the official documentation: That is especially true for JavaScript’s testing frameworks – they all have excellent documentations. Vue, in addition, is famed for its documentation clarity. Official documentation tends to start with more bare bone installation instead of adding every optional packages in the universe that the writer personally likes, and it is always the most updated version of instruction.
  • Date of Publish: If you decide to use a tutorial, always try for one that is written within a year. The landscape of JavaScript is very fast changing, and the npm requirements changes equally as quick. If an outdated tutorial is used, error could occur and the debugging can get confusing, especially since there tends to be more packages involve with older technologies.
  • 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.

The Reason

  • @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 Source

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!!! ✊

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.