Unit testing with Vitest

Vitest is one of the main unit test frameworks in the JavaScript ecosystem, and it has a syntax very similar to Jest. Most of the knowledge you will gain in this chapter is transferrable to other testing frameworks, as they all follow a very similar structure.

Vitest is already set up in our application, but we will cover the basic steps required to add it to your new or existing applications.

Installing Vitest in your application

The first step required is the package for Vitest and Vue Test Utils, which are, respectively, the test runner and the Vue components testing framework. We can achieve this by opening the terminal and running the following command in the root folder of our application:

npm install -D vitest @vue/test-utils

Now that the packages are installed, we just need to add a script to the package.json file so that we can simply run it in the future:

...
"scripts": {
  "dev": "vite",
...