How to Run Unit Tests in Vue using Vitest

1. Prerequisites
2. Configuring Vitest for unit testing
3. Creating a test file
4. Running the test
5. Conclusions

Unit tests, what do you know about them? If you are thinking along the lines of testing units you are correct. They are automated tests that test particular sections of an application, usually small isolated sections/units of code such as functions, classes or even modules, to see whether they are functioning as expected.

If you're familiar with the terms 'Whitebox' and 'Blackbox' testing, you can look at Unit Testing as Whitebox testing and Component Testing as Blackbox testing. Whitebox testing is a type of testing where the logic of the application is looked at. Logic here means how the functions are expected to work. From the Vue documentation, Whitebox tests are aware of implementation details and dependancies of a component.

Blackbox testing on the other hand is a type of test where we check for the behaviour of the application e.g.: how the components are being rendered across different browsers. Again from the Vue documentation, the tests are unaware of implementation details of a component.

Prerequisites

• A Vue app with Vite (I will be using this project to demonstrate unit testing)

Configuring Vitest for unit testing

You can follow this section in this article to install and set up Vitest in your Vue app.

Creating a test file

We will create a simple test to check whether clicking a button results in a function being executed. We already have a button component (./src/components/Button.vue) in this project and we will import it in a component called Home (./src/views/Home.vue).

In the Home component, we will have a function which changes a reactive variable's value to have the string 'Hello there!'. We will display the message inside a paragraph. Initially, we will have an empty string, therefore, we will test the paragraph's value before and after the button click.

You can create your Button component in ./src/components/Button.vue and copy the Button.vue code from the project then create Home component in ./src/views/Home.vue and add the following:

<script setup>
import Button from "../components/Button.vue";
import { ref } from "vue";

const buttonTest = ref("");

const doSomething = () => {
  buttonTest.value = "Hello there!";
};
</script>

<template>
  <div class="w-full p-5 flex flex-col">
    <div class="pt-5">
      <Button
        type="button"
        id="button"
        class=""
        option="slightlyRounded"
        label="Hello there"
        backgroundColor="black"
        color="white"
        @clicked="doSomething"
      />
    </div>

    <p id="test-button">{{ buttonTest }}</p>
  </div>
</template>

In our test file, we will import the Home component and click the button then test whether the button click runs the function the way it is supposed to. Create your Home.test.js file inside a tests folder (e.g.: ./src/tests/Home.test.js) and add the following code:

import { mount } from "@vue/test-utils";
import Home from "../views/Home.vue";

describe("Testing the Home component", () => {
  test("Clicking button results in function execution", async () => {
    expect(Home).toBeTruthy();

    const wrapper = mount(Home);
    const paragraph = wrapper.find('[id="test-button"]');
    const button = wrapper.get("[id='button']");

    expect(paragraph.text()).toBe("");
    await button.trigger("click");
    expect(paragraph.text()).toBe("Hello there!");
  });
});

Running the test

If you set up Vitest properly, you can run:

npm run test

and you will have your result similar to this one:

✓ src/tests/Home.test.js (1)

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  15:07:08
   Duration  138ms


 PASS  Waiting for file changes...
       press h to show help, press q to quit

Conclusions

Unit tests help you catch issues with a function's implementation/logic. For example, in this article we are using a button to call a function which changes a reactive variable's value. If in the function we had assigned the value like this:

var buttonTest = ref("");

const doSomething = () => {
  buttonTest = "Hello there!";
};

the test would have failed because you cannot assign a value to a ref() without using .value like this:

buttonTest.value = "Hello there!";

and this will make you to try and correct your errors/bugs since it shows you exactly which function has failed. You would be able to catch such errors/bugs, which don't appear when coding, early on before shipping an app to production.

I hope this article has helped you learn how you can set up and run a unit test in Vue using Vitest. You can let me know in the comments.