Vitest

How to use Vue with Vitest - free starter

This article will teach you how to integrate Vitest - recommended by Vite testing tool with your project.

Lets see how to use Vitest with MDB 5 for testing across our layout, components, and utilities.

Prerequisites

Before starting the project make sure to install the following utilities:

• Node LTS (14.18.x recommended)
• Vite (3.x.x recommended)
• Code editor. We recommend VSCode

Creating a new project

First, we need to create a new Vite project.

Step 1

Init the project and choose vue framework. You can add a name for your project as we did in example below

npm init vite@latest my-vue-app

Step 2

Navigate to app's directory.

cd my-vue-app

Step 3

Install dependencies.

npm install

Step 4

Setup MDB.

npm install mdb-vue-ui-kit

Step 5

Import CSS. Add the following line at the beginning of your main.ts file:

import 'mdb-vue-ui-kit/css/mdb.min.css';

Step 6

Import Font Awesome and Roboto font. Add the following lines in public/index.html file inside head section:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />

Step 7

Enable sourcemaps during development.

export default defineConfig({
  plugins: [vue()],
  css: {
    devSourcemap: true,
  },
});

Step 8

Launch the application.

npm run dev

Installation & usage

Step 1

Install Vitest.

npm install -D vitest

Step 2

Create simple component in src directory so we will able to test most important features.

<template>
  <MDBAlert
    v-model="alert"
    id="alert-primary"
    color="primary"
    position="top-right"
    stacking
    width="535px"
    appendToBody
    autohide
    :delay="5000"
  >
    {{ message }}
  </MDBAlert>
</template>

<script setup lang="ts">
  import { MDBAlert, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const alert = ref(false);
  defineProps({
    message: String,
  });
</script>

Step 2

Create test folder inside root directory and put ExampleComponent.test.ts inside and write basic test checking if the componet renders properly.

import { expect, test, vi } from "vitest";
import { mount, VueWrapper } from "@vue/test-utils";
import ExampleComponent from "../ExampleComponent.vue";

test("mount ExampleComponent", async () => {
  expect(ExampleComponent).toBeTruthy();
});

Step 3

But we will get an error because unrecognized third-party library. For that we have to mock MDBVue UI Kit. Add vi.mock above our test.

vi.mock("mdb-vue-ui-kit", () => ({
  defineComponent: vi.fn(),
}));

Step 4

Beyond that Vitest needs an environment for proper working. You can use one of couple available (more about in Vitest documentation) but for now let's try with happy-dom.

npm i -D happy-dom

Step 5

After installation all we need to do is add commented line at the top of our test.

// @vitest-environment happy-dom

Step 6

For testing more advanced things like props or another elements in our component we got to use more mocking functions. For example if there things using Vue's slots, then we have to use template element in vi.mock function. This is an example test using a few more advanced mocks.

// @vitest-environment happy-dom

import { expect, test, vi } from "vitest";
import { mount, VueWrapper } from "@vue/test-utils";
import ExampleComponent from "../App.vue";

vi.mock("mdb-vue-ui-kit", () => ({
  defineComponent: vi.fn(),
  MDBBtn: vi.fn(),
  MDBAlert: {
    props: {
      "v-model": Boolean,
      color: String,
      // other props if needed
    },
    template: "<slot></slot>",
  },
}));

test("mount ExampleComponent", async () => {
  const wrapper: VueWrapper<any> = mount(ExampleComponent, {
    props: {
      message: "example message",
    },
  });

  expect(ExampleComponent).toBeTruthy();
  expect(wrapper.text()).toContain("example message");
});

More about Vitest

For more information, see Vitest page. There you can read about other options, best practices and testing.