Getting Started with Vue and Vitest

I will be taking us through some steps to get you started with Vue and Vitest. This walk-through will assume that you have an understanding of how unit testing works, so lets dive in!

What is Vitest?

Vitest is a unit-test framework by Anthony Fu and Jessica Sachs, who are on the Vue Core Team. It is powered by Vite, and can also be used with React, Svelte, Lit and more.

Similarities between Jest and Vitest

If you write Jest, using Vitest will feel very natural. The only major difference is that, with Vitest, you don't have the methods readily available until you import them.

Why Vitest?

• It is very fast
• It has hot reload out of the box. You don't have to add extra watch flags since it does that by default.
• happy-dom or jsdom for DOM mocking
• Out-of-box TypeScript / JSX support
• Components testing for Vue, React, Svelte, Lit and more
• Read more here.

Migration

It's easy to migrate from Jest to Vitest, all you need to do is follow the setup here.

Setup the Project

I will assume you already have Vue CLI installed on your machine, which helps you set up the application without needing to do so many configurations yourself. If you don't have the Vue CLI installed yet, just run this command:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Create the project

Having installed the Vue CLI, you can go to the folder where you want to create the application and run:

vue create <project-name>

Installing dependencies & configurations

Now it's time for us to add Vitest to the project. Please Ensure you are in the project directory before running this next command.

# with npm
$ npm install -D vitest

# or with yarn
$ yarn add -D vitest

You will also need to add some plugins to the project.

• @vitejs/plugin-vue: Helps vitest know which framework to use. In our case, we are using Vue. Read More.
• jsdom: gives us access to the DOM while testing. Read More.
• @vue/test-utils: gives us access to methods like mount and shallowMount. Read More.

You can add them by running this command in the project root directory.

# with npm
npm install @vitejs/plugin-vue jsdom @vue/test-utils -D

# or with yarn
yarn add @vitejs/plugin-vue jsdom @vue/test-utils -D

In your package.json file, add the following to the script:

"test": "vitest",
"coverage": "vitest run --coverage"

This will enable you to run the test commands.

Next, we will create a vitest.config.ts file in our root directory and add this code:

import { defineConfig } from "vitest/config";
import Vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [Vue()],
  test: {
    globals: true,
    environment: "jsdom",
  },
   root: ".", //Define the root
});

Create a component

Now lets create a component HelloWorld.vue in the components folder and add this code to it:

<template>
  <p>{{ msg }}</p>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",
  props: {
    message: {
      type: String,
      default: "World",
    },
  },
  setup(props) {
    return {
      msg: props.message,
    };
  },
});
</script>

Creating your test environment

Create a test folder. Inside that folder, create a file e.g example.spec.ts, and in this file add this code:

import { mount } from "@vue/test-utils";
import HelloWorld from "src/components/HelloWorld.vue";
import { describe, it, expect } from "vitest";

describe("HelloWorld.vue", () => {

  it("should renders is page content is correct", () => {
    const message = "Happy People";
    const testMessage = "Happy People";
    const wrapper = mount(HelloWorld, {
      props: { message },
    });

    expect(wrapper.text()).toBe(testMessage);
  });

  it("should render if props value is correct", () => {
    const message = "Happy People";
    const testMessage = "Happy People";
    const wrapper = mount(HelloWorld, {
      props: { message },
    });

    expect(wrapper.vm.message).toBe(testMessage);
  });
});

Code explanation

With Vite, you will have to import the methods used for testing like describe, expect, test, it, and so on.

In the code above, we are testing for two things:

• The content on the page.
• The value of the prop passed, which in our case is message.

This means that it's possiblle for the prop value to be correct, but the content of the page wrong. If, for example, we update our Home.vue content template tag to be this...

<template>
  <p><span>Something</span>{{ msg }}</p>
</template>

... this will fail, and can only pass if we add 'Something' as part of the prop value that we pass.

Now try running this command:

# npm
npm run test

# Or with yarn

yarn test

Conclusion

Kudos to Anthony Fu, Jessica Sachs of the Vite team for this amazing job well done. I strongly believe that Vitest will probably become the industry standard just like Vite. Feel free to let us know what you think.