단위 테스트

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

In order to properly utilize Typescript, Vuetify components extend the Vue object. This has the potential to cause issues as noted in the above alert. Instead of using a localVue instance we must instead install Vuetify globally in the unit tests setup file. This can vary between test runners. Make sure to reference the appropriate documentation on setup files.

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.

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.

Many of Vuetify's components utilize the global $vuetify object to derive settings such as default text or breakpoint information. When testing these components, you will need to provide vue-test-utils with a mock object.

Keep in mind, you only need to stub the services that are being used. such as lang or application. You can also import these services manually.

A complete list of all services available are listed below:

Vuetify passes the data-* attributes from components to the relevant HTML elements, which allows E2E test framework to locate them easily.

For example, Cypress recommends to add data-cy attributes to make it easy to target elements.