DEV Community

Cover image for Adding Vitest to Nuxt 3 ⚡ (2023)
Lewis Lloyd
Lewis Lloyd

Posted on

 

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
Enter fullscreen mode Exit fullscreen mode

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',
  },
})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

// .eslintrc.cjs

module.exports = {
  // ...
  plugins: ['vitest'],
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Scripts

Add the following script to your project:

// package.json

{
  // ...
  "scripts": {
    // ...
    "test": "vitest"
    // ...
  }
  // ...
}
Enter fullscreen mode Exit fullscreen mode

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()
  })
})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (0)