DEV Community

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

Posted on

Adding Vitest to Nuxt 3 ⚡ (2023)

#nuxt #nuxt3 #vitest #testing

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 (3)

Collapse
 
prestonbernstein profile image
preston-bernstein •

Hi, just want to suggest a small optimization.

in your vitest.config.js file, you should import defineConfig from vitest, and not vite. If you import from vite, you will have to specifically install vite as dependency, when it is available from default in nuxt 3

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
phonty29 profile image
Amedov Bekmuhamet •

Sorry. But your testing component lacks imports and that's the biggest pitfall in testing Nuxt 3 project

Collapse
 
salticidae profile image
Eïdogenics L.α.β •

this Nuxt plugin called nuxt-vitest intend to solve that pitfall, works for me at the time of this writings. Take not that it is still under heavy developments.