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:
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.