Unit tests are an important (and sometimes ignored) part of developing applications. They help us secure or processes and work flows, ensuring that the most critical parts of our projects are protected from accidental mistakes or oversights in our development. It's because of that that Vue has its own testing utility called vue-test-utils. It provides useful features for interacting with Vue components and works with many popular test runners.

Test runner setup

Information on how to setup a test runner with vue-cli-3 can be found on the official documentation. At a glance, vue-cli-3 has getting started repositories for the following test runners:

Spec tests

Creating unit tests in Vuetify are similar to vuex and vue-router in that you will use the Vuetify object in a localVue instance and pass an instance to the mount functions options.

Let's create an example test use-case that we might find in our application.

In the example above we have created a custom component with a title prop and a v-btn that emits a custom event when clicked. We now want to create tests that ensure this behavior works correctly and continues to do so through future changes. The below examples are created with with the Jest test runner.

Testing efficiency

When writing tests you will often find yourself repeating the same things over and over. In this case, it's beneficial to create helper functions to reduce the duplication for each individual test. Basically, DRYing up our code.

One of the most common duplicated code written in unit tests are the mount functions. This can easily be compacted into a reusable function for each run.

E2E tests

Guide coming soon. If you would like to help contribute to this section, please contact a developer in our community.

Edit this page | language on Github
Vuetify
StoreFor Enterprise