Adding Vitest to Nuxt 3 ⚡ (2023)

Introduction

In this post, we'll introduce Vitest for blazing-fast unit tests in your Nuxt 3 project.

Testing

Unit tests are important for ensuring that your code is working correctly.

This is especially important when making changes to your code, as you can ensure that you haven't introduced any new bugs or problems to existing features. Or, at least to the extent that these features have been covered by tests.

Vitest

Vitest is a test runner based on Vite, an alternative module bundler to webpack which Nuxt 3 uses by default.

It's incredibly similar to Jest, and often considered a drop-in replacement for it.

Installation

Packages

Install the following dependencies:

# Vitest
yarn add --dev vitest jsdom @vitejs/plugin-vue

# Test utils
yarn add --dev @vue/test-utils @nuxt/test-utils

Configuration

Create your Vitest configuration file (vitest.config.js):

// vitest.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: "jsdom",
  },
});

ESLint integration

If you're using ESLint from earlier in the series, you should also add its Vitest plugin:

yarn add --dev eslint-plugin-vitest

Then, modify your .eslintrc.cjs file to add the plugin:

// .eslintrc.cjs

module.exports = {
  // ...
  plugins: ["vitest"],
  // ...
};

Scripts

Add the following script to your project:

// package.json

{
  // ...
  "scripts": {
    // ...
    "test": "vitest"
    // ...
  }
  // ...
}

Usage

Creating tests

At this point, you should use a learning resource such as Testing with Vitest to get started.

A test may look something like this:

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

import HelloWorld from "../components/HelloWorld.vue";

describe("HelloWorld", () => {
  it("is a Vue instance", () => {
    const wrapper = mount(HelloWorld);
    expect(wrapper.vm).toBeTruthy();
  });
});

Running tests

To run your unit tests, use yarn test.

$ yarn test

>>> yarn run v1.22.5
>>> $ vitest
>>>
>>>  DEV  v0.26.3 ~/Documents/GitHub/nuxt-app
>>>
>>>  ✓ tests/HelloWorld.spec.ts (1)
>>>
>>>  Test Files  1 passed (1)
>>>       Tests  1 passed (1)
>>>    Start at  23:19:54
>>>    Duration  1.78s (transform 538ms, setup 1ms, collect 154ms, tests 20ms)
>>>
>>>
>>>  PASS  Waiting for file changes...
>>>        press h to show help, press q to quit

All done!

Now you can start shipping new features in peace 😉

Hey, guys! Thank you for reading. I hope that you enjoyed this.

Keep up to date with me:

• Website: https://lloyd.cx/
• Twitter: https://twitter.com/lloydtao/
• GitHub: https://github.com/lloydtao/
• LinkedIn: https://www.linkedin.com/in/lloydtao/